<template>
  <div class="box rightDrawerStyle">
    <div style="position: relative; height: calc(100vh - 105px)">
      <div id="beforedqmapBox" ref="themap" class="map"></div>
      <div id="dqmapBox" ref="themap" class="map"></div>
      <div id="wrapper"></div>
    </div>
    <!--左侧抽屉-->
    <Drawer
      placement="left"
      v-model="leftDrawer"
      :mask="false"
      :mask-closable="false"
      :draggable="true"
      :transfer="false"
      width="320"
      :inner="true"
    >
      <!--头部-->
      <template slot="header">
        <div class="leftDrawerHead">
          <div class="headLeft">
            <i
              class="fa fa-search-plus colortempstyle"
              style="margin-right: 5px"
              aria-hidden="true"
            ></i>
            <strong class="colortempstyle">查询条件</strong>
            <!-- <Checkbox v-model="maintenanceSingle">数据库维护</Checkbox> -->
          </div>
          <div class="headRight">
            <!-- <i-switch :value="selectOPen" size="large">
                            <span slot="open">优选</span>
                            <span slot="close">关闭</span>
                        </i-switch>-->
            <Button
              type="primary"
              size="small"
              @click="clearList"
              style="margin-right: 10px"
              >清除</Button
            >
            <Button type="primary" size="small" @click="searchList"
              >查询</Button
            >
          </div>
        </div>
      </template>
      <!--体-->
      <div class="leftCard">
        <!--tab切换-->
        <Tabs value="TabName1" size="small" v-model="tabValue">
          <TabPane label="行政区域" name="a" class="selectCity">
            <Form :model="selectCity" :label-width="80">
              <FormItem label="区域选择：" class="rrCity">
                <Cascader
                  ref="Cascader"
                  :data="regionCascader"
                  change-on-select
                  filterable
                  :transfer="true"
                  :load-data="loadRegionData"
                  @on-change="regionChangeEvent"
                ></Cascader>
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="经纬度" name="c">
            <Form :model="latitudeLongitude" :label-width="76">
              <div style="display: flex">
                <FormItem label="左上经度：">
                  <InputNumber
                    size="small"
                    :max="180"
                    :min="-180"
                    :step="0.001"
                    v-model="latitudeLongitude.leftTopLat"
                  ></InputNumber>
                </FormItem>
                <FormItem label="左上纬度：">
                  <InputNumber
                    size="small"
                    :max="90"
                    :min="0"
                    :step="0.001"
                    v-model="latitudeLongitude.leftTopLong"
                  ></InputNumber>
                </FormItem>
              </div>
              <div style="display: flex">
                <FormItem label="右下经度：">
                  <InputNumber
                    size="small"
                    :max="180"
                    :min="-180"
                    :step="0.001"
                    v-model="latitudeLongitude.rightBottomLat"
                  ></InputNumber>
                </FormItem>
                <FormItem label="右下纬度：">
                  <InputNumber
                    size="small"
                    :max="90"
                    :min="0"
                    :step="0.001"
                    v-model="latitudeLongitude.rightBottomLong"
                  ></InputNumber>
                </FormItem>
              </div>
              <FormItem>
                <Button size="small" type="primary" @click="getLocation"
                  >定位</Button
                >
                <Button
                  size="small"
                  type="primary"
                  style="margin-left: 8px"
                  @click="drawRectangle"
                  >框选</Button
                >
              </FormItem>
            </Form>
          </TabPane>
          <TabPane label="上传shp" name="d">
            <Upload
              ref="uploadShpFile"
              :action="$api.dataOptimizationApi.uploadShpFile"
              :on-success="onSuccess"
              :on-error="onError"
              accept=".zip"
            >
              <Button size="small" icon="ios-cloud-upload-outline"
                >点击上传</Button
              >
            </Upload>
            <div
              style="margin-top: 15px; display: flex; flex-direction: column"
            >
              <span>1. 仅支持单要素的zip压缩包</span>
              <span>2. 至少包括.shp,.shx,.prj,.dbf,.sbn,.sbx文件</span>
              <span>3. WGS-84坐标系</span>
            </div>
          </TabPane>
        </Tabs>
        <!--form表单-->
        <Form :model="dicom" :label-width="70">
          <FormItem label="影像类型：">
            <!-- @on-change="event1" -->
            <Select v-model="dicom.type">
              <Option
                v-for="item in imageTypedata"
                :value="item.value"
                :key="item.value"
                :label-in-value="true"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="分 辨 率：" style="word-spacing: 3px">
            <Row>
              <Col span="11">
                <InputNumber
                  v-model="dicom.startResolution"
                  :min="0"
                ></InputNumber>
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <InputNumber
                  v-model="dicom.endResolution"
                  :min="0"
                ></InputNumber>
              </Col>
            </Row>
          </FormItem>
          <FormItem label="拍摄时间：">
            <Row>
              <DatePicker
                type="date"
                :options="disabledstartData"
                placeholder="开始时间"
                v-model="dicom.startdate"
              ></DatePicker>
              <DatePicker
                type="date"
                placeholder="结束时间"
                :options="disabledendData"
                v-model="dicom.enddate"
                style="margin-top: 10px"
              ></DatePicker>
            </Row>
          </FormItem>
          <CheckboxGroup>
            <Checkbox
              style="
                display: -webkit-inline-box;
                margin-left: -6px;
                margin-top: 10px;
              "
              v-model="single"
            >
              <FormItem
                label="云 量："
                style="
                  margin-left: -10px;
                  height: 35px;
                  width: 280px;
                  word-spacing: 4px;
                "
              >
                <Slider
                  v-model="dicom.cloudslider"
                  style="display: inline-block; width: 120px"
                >
                </Slider>
                <InputNumber
                  v-model="dicom.cloudslider"
                  :max="100"
                  style="margin-top: -20px; margin-left: 10px"
                ></InputNumber>
              </FormItem>
            </Checkbox>
          </CheckboxGroup>
          <FormItem label="卫  星：" style="word-spacing: 22px">
            <Select
              v-model="dicom.satellite"
              multiple
              @on-change="getSensorList"
            >
              <Option
                v-for="item in satelliteListt"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="传 感 器：" style="word-spacing: 3px">
            <Select v-model="dicom.sensor" multiple>
              <Option
                v-for="item in sensorList"
                :value="item.value"
                :key="item.index"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="产品类型：">
            <Select v-model="dicom.productclass" multiple>
              <Option
                v-for="item in ProductLevelClass"
                :value="item.value"
                :key="item.value"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="坐 标 系：" style="word-spacing: 3px">
            <Select v-model="dicom.coordinateSystem" clearable>
              <Option
                v-for="item in coordSystem"
                :value="item.label"
                :key="item.label"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="质检结果：">
            <Select v-model="dicom.QCresult" clearable>
              <Option
                v-for="item in QCresult"
                :value="item.value"
                :key="item.label"
                >{{ item.label }}</Option
              >
            </Select>
          </FormItem>
        </Form>
        <!-- 下面抽屉 -->
        <div>
          <div
            @click="bottomDrawer()"
            style="text-align: center"
            v-show="!setting"
          >
            <i class="fa fa-caret-down"></i>
          </div>
          <Form :model="dicomDetail" :label-width="70" v-show="setting">
            <FormItem label="处理算法：">
              <Input
                v-model="dicomDetail.resolution"
                placeholder="请输入关键字、模糊匹配"
              ></Input>
            </FormItem>
            <FormItem label="数据格式：">
              <Select v-model="dicomDetail.dataFormat" clearable>
                <Option
                  v-for="item in dataLayout"
                  :value="item.label"
                  label-width="small"
                  :key="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <FormItem label="生产时间：">
              <DatePicker
                type="date"
                placeholder="请输入开始时间"
                v-model="dicomDetail.startdate"
              ></DatePicker>
              <DatePicker
                type="date"
                placeholder="请输入结束时间"
                v-model="dicomDetail.enddate"
                style="margin-top: 10px"
              ></DatePicker>
            </FormItem>
            <FormItem label="生产流程：">
              <Input
                placeholder="请输入关键字、模糊匹配"
                v-model="dicomDetail.flowProduction"
              ></Input>
            </FormItem>
          </Form>
          <div
            @click="bottomDrawer()"
            style="text-align: center"
            v-show="setting"
          >
            <i class="fa fa-caret-up"></i>
          </div>
        </div>
      </div>
    </Drawer>
    <!--右侧抽屉-->
    <Drawer
      title="查询结果"
      :closable="true"
      v-model="rightDrawer"
      :mask="false"
      :transfer="false"
      :mask-closable="false"
      :draggable="true"
      width="350"
      :inner="true"
    >
      <template slot="header">
        <div class="leftDrawerHead">
          <div class="headLeft">
            <i
              class="fa fa-search-plus colortempstyle"
              style="margin-right: 5px"
              aria-hidden="true"
            ></i>
            <h6 class="colortempstyle" style="margin-top: 7px">查询结果</h6>
          </div>
        </div>
      </template>
      <div class="myTable">
        <Tabs value="name1" @on-click="clickTabPane">
          <TabPane label="查询列表" name="name1">
            <Table
              border
              ref="selection"
              :ellipsis="true"
              :columns="getColumns"
              :data="queryDataList"
              highlight-row
              @on-select="queryTableSelectEvent"
              @on-select-cancel="queryTableSelectCancelEvent"
              @on-select-all="onTableSelectAll($event, 'greenLineLayer')"
              @on-select-all-cancel="
                onTableSelectAllCancel($event, 'greenLineLayer')
              "
            >
              <template slot="img" slot-scope="{ row }">
                <Icon
                  type="ios-photos"
                  @click="getMapimgdata(row)"
                  :style="{ color: row.colorName }"
                  v-if="row.colorName == '#2d8cf0'"
                ></Icon>
                <Icon
                  v-else
                  type="ios-photos-outline"
                  @click="getMapimgdata(row)"
                  :style="{ color: row.colorName }"
                ></Icon>
              </template>

              <template slot="quality_inspection_result" slot-scope="{ row }">
                <span v-if="row.quality_inspection_result == 'qualified'"
                  >合格</span
                >
                <span v-else-if="row.quality_inspection_result == 'unqualified'"
                  >不合格</span
                >
                <span v-else>未检查</span>
              </template>
              <template slot="image_name" slot-scope="{ row }">
                <span
                  :title="row.image_name"
                  @mouseenter="tableMouseEnter(row, tableHightLayerId1)"
                  @mouseout="tableMouseOut(tableHightLayerId1)"
                  @click="tableRowClickEvent(row)"
                  @dblclick="tableRowClickEvent(row)"
                  class="inOneLine"
                  >{{ row.image_name }}</span
                >
              </template>
            </Table>
            <div class="tableBottom">
              <div>
                <Button size="small" type="primary" @click="importData"
                  >导入优选列表</Button
                >
              </div>
              <div style="margin-left: 6px">
                <span>
                  共 {{ this.queryDataList.length }} 条; 已选
                  {{ this.selectRow.length }} 条</span
                >
              </div>
            </div>
          </TabPane>
          <TabPane label="选择列表" name="name2" class="rightDrawerStyle">
            <Table
              border
              size="small"
              ref="selection1"
              :columns="getColumn"
              :data="resultTableData"
              highlight-row
              @on-select="queryTableSelectEvent1"
              @on-select-cancel="queryTableSelectCancelEvent1"
              @on-select-all="onTableSelectAll($event, 'redLineLayer')"
              @on-select-all-cancel="
                onTableSelectAllCancel($event, 'redLineLayer')
              "
            >
              <template slot="icon" slot-scope="{ row }">
                <img
                  src="@/assets/icons/layers.svg"
                  style="width: 18px"
                  alt=""
                  @click="tableRowClickEvent(row)"
                />
                <!-- <Icon
                    type="ios-image"
                    style="font-size: 26px; color: #84acd0"
                  /> -->
              </template>
              <template slot="img" slot-scope="{ row }">
                <!-- <Icon
                  type="ios-photos-outline"
                  @click="getMapimgdata(row)"
                  :style="{ color: row.colorName }"
                ></Icon> -->
                <Icon
                  type="ios-photos"
                  @click="getMapimgdata(row)"
                  :style="{ color: row.colorName }"
                  v-if="row.colorName == '#2d8cf0'"
                ></Icon>
                <Icon
                  v-else
                  type="ios-photos-outline"
                  @click="getMapimgdata(row)"
                  :style="{ color: row.colorName }"
                ></Icon>
              </template>
              <template slot="image_name" slot-scope="{ row }">
                <span
                  :title="row.image_name"
                  @mouseenter="tableMouseEnter(row, tableHightLayerId2)"
                  @mouseout="tableMouseOut(tableHightLayerId2)"
                  @click="tableRowClickEvent(row)"
                  @dblclick="tableRowClickEvent(row)"
                  class="inOneLine"
                  >{{ row.image_name }}</span
                >
              </template>
              <template slot="fileExistFlag" slot-scope="{ row }">
                <span>
                  {{ row.fileExistFlag == 1 ? "不存在" : "存在" }}
                </span>
              </template>
            </Table>
            <div class="tableBottom">
              <div>
                <Button
                  size="small"
                  type="primary"
                  @click="clearTableListdata"
                  data-permission="Btn_daoru_delet"
                  >删除</Button
                >
                <Button
                  size="small"
                  type="primary"
                  style="margin-left: 5px"
                  @click="setUpMerthon"
                  data-permission="Btn_daoru_create"
                  >创建任务</Button
                >
                <!-- <Button
                  size="small"
                  type="primary"
                  style="margin-left: 5px"
                  @click="StatisticsData"
                  data-permission="Btn_daoru_tongji"
                  >统计</Button
                >
                <Button
                  size="small"
                  type="primary"
                  style="margin-left: 5px"
                  @click="downloadData"
                  data-permission="Btn_daoru_download"
                  >下载</Button
                > -->
              </div>
              <div>
                <span>
                  <!--                  共 {{ this.resultTableData.length }} 条; -->
                  已选{{ this.selectResultRow.length }} 条</span
                >
              </div>
            </div>
          </TabPane>
          <TabPane label="数据维护" name="name3">
            <div class="my-table">
              <Table
                border
                width="2050"
                class="matanceData"
                size="small"
                ref="bottomTable"
                :columns="getColumnsData"
                :data="maintenanceData"
                @on-select="queryTableSelectEvent3"
                @on-select-cancel="queryTableSelectCancelEvent3"
                @on-select-all="onTableSelectAll($event, 'purpleLineLayer')"
                @on-select-all-cancel="
                  onTableSelectAllCancel($event, 'purpleLineLayer')
                "
              >
                <template slot="fileExistFlag" slot-scope="{ row }">
                  {{ row.fileExistFlag == 1 ? "不存在" : "存在" }}

                  <!-- <p v-if="row.fileExistFlag == 1">不存在</p>
              <p v-else-if="row.fileExistFlag == 0">存在</p>
              <p v-else>未检查</p> -->
                </template>
                <template slot="quality_inspection_result" slot-scope="{ row }">
                  <span v-if="row.quality_inspection_result == 'qualified'"
                    >合格</span
                  >
                  <span
                    v-else-if="row.quality_inspection_result == 'unqualified'"
                    >不合格</span
                  >
                  <span v-else>未检查</span>
                </template>
                <template slot="img" slot-scope="{ row }">
                  <!--   @click="getMapimg(row)" -->
                  <Icon
                    type="ios-photos"
                    @click="getMapimgdata(row)"
                    :style="{ color: row.colorName }"
                    v-if="row.colorName == '#2d8cf0'"
                  ></Icon>
                  <Icon
                    v-else
                    type="ios-photos-outline"
                    @click="getMapimgdata(row)"
                    :style="{ color: row.colorName }"
                  ></Icon>
                </template>
                <template slot="image_name" slot-scope="{ row }">
                  <span
                    :title="row.image_name"
                    @mouseenter="tableMouseEnter(row, tableHightLayerId3)"
                    @mouseout="tableMouseOut(tableHightLayerId3)"
                    @click="tableRowClickEvent(row)"
                    @dblclick="tableRowClickEvent(row)"
                    class="inOneLine"
                    >{{ row.image_name }}</span
                  >
                </template>
              </Table>
            </div>
            <div style="margin: 10px; overflow: hidden">
              <Button
                size="small"
                type="primary"
                style="float: left"
                @click="deleteManage"
              >
                删除
              </Button>
              <Button
                size="small"
                type="primary"
                style="float: left; margin-left: 2px"
                @click="editAllselectManage"
              >
                批量修改
              </Button>
              <div style="float: right">
                <div style="display: flex">
                  总共{{ manageTotalSize }}条 , 已选{{
                    this.managerselectRow.length
                  }}条
                  <Page
                    simple
                    :total="manageTotalSize"
                    :current.sync="pageNumer"
                    @on-change="changePagemanage"
                    :page-size="pageSizeData"
                    show-elevator
                  ></Page>
                </div>
              </div>
            </div>
          </TabPane>
        </Tabs>
      </div>
    </Drawer>

    <Modal
      v-model="addShow"
      scrollable
      draggable
      :mask="false"
      :transfer="false"
      width="auto"
      title="创建任务"
      class="createModal"
      style="z-index: 10000000000; position: absolute"
    >
      <p slot="header" class="modalHeader">
        <span style="margin-left: 5px">创建任务</span>
      </p>
      <div style="display: flex">
        <!-- 左侧树形菜单 -->
        <div style="max-height: 778px; overflow-y: overlay; margin-left: 15px">
          <Tree
            :render="renderContent"
            :data="treeData"
            ref="tree"
            @on-select-change="selectTree"
          ></Tree>
        </div>
        <!-- 右侧对应不同的任务创建流程 -->
        <div style="max-height: 778px; overflow-y: auto">
          <taskCreate
            :groupTreeId="groupTreeId"
            :taskExeFlag="taskFlag"
            ref="taskCreate"
            :selectResultRow="selectResultRow"
          ></taskCreate>
          <!-- :groupTreeId  是定义在子组件里用于接收父组件参数的变量 -->
          <!-- "groupTreeId  是定义在父组件里的变量名，用于记录要传给子组件的数据" -->
        </div>
      </div>
      <template #footer class="footerBtns">
        <CButton @click="addShow = false" color="info" class="cancel-btn"
          >取消</CButton
        >
        <CButton @click="commitOk" color="info" class="system-btn-style"
          >确定</CButton
        >
      </template>
      <!-- <div slot="footer"></div> -->
    </Modal>
    <fileCatalog
      ref="refFileCatalogModal"
      :modalShow="fileCatalogModal"
      @closed="fileCatalogModalClose"
      @menuOk="fileCatalogModalOk"
    ></fileCatalog>
    <imageInfo
      ref="refImageInfoModal"
      :paramData="infoData"
      @closed="imageInfoModalClose"
    >
    </imageInfo>

    <Spin fix v-if="isLoading">
      <Icon type="ios-loading" size="80" class="demo-spin-icon-load"></Icon>
      <div>{{ loadingText }}</div>
    </Spin>

    <Modal
      v-model="taskBuild"
      draggable
      scrollable
      :transfer="false"
      :z-index="10000"
      width="1200"
      style="height: 70%"
      title="任务集管理"
      footer-hide
    >
      <p slot="header" class="modalHeader">
        <span style="margin-left: 5px">任务集管理</span>
        <Button
          type="primary"
          size="small"
          style="margin-right: 30px"
          @click="openAdd"
        >
          <CIcon name="cil-plus" />&nbsp;添加任务集
        </Button>
      </p>
      <div>
        <taskAggregate ref="taskAggregate"></taskAggregate>
      </div>
    </Modal>
    <edit-manage-modal
      ref="refEditManageModal"
      :editManageShow="ManageShow"
      :managerselectRow1="managerselectRow"
      @closededitManage="closededitManageData"
      @fresh="searchDataList"
    >
    </edit-manage-modal>
    <Modal
      v-model="modal12"
      draggable
      scrollable
      :mask="false"
      title="详细信息"
      width="450"
      height="400"
      footer-hide
      style="float: right"
      class="bbb"
    >
      <div style="display: flex">
        <Card style="width: 50%">
          <div>影像类型：{{ imageTypeAlert }}</div>
          <div>拍摄时间：{{ image_shoot_timeData }}</div>
          <div>云量：{{ cloud_coverData }}</div>
          <div>卫星：{{ sat_typeData }}</div>

          <div>传感器：{{ sensor_typeData }}</div>
          <div>产品类型：{{ productTypeData }}</div>
          <div>坐标系：{{ crsData }}</div>
          <div>
            质检结果：
            <span v-if="quality_inspection_result == 'qualified'">合格</span>
            <span v-else-if="quality_inspection_result == 'unchecked'">未检查</span>
            <span v-else-if="quality_inspection_result == 'unqualified'"
              >不合格</span
            >
          </div>
          <!-- <div>质检结果：{{ quality_inspection_result ==  }}</div> -->
        </Card>
        <Card style="width: 50%">
          <div>
            <!-- @/assets/icons/thumb-GF.jpg -->
            <img :src="imagePathData" alt="" width="100%" />
          </div>
        </Card>
      </div>
    </Modal>
    <div class="float-box" :style="{ left: leftDrawer ? '300px' : '10px' }">
      <Button
        type="primary"
        shape="circle"
        title="隐藏搜索"
        style="position: absolute; left: 40px; z-index: 200"
        @click="closeTab"
      >
        <i class="fa fa-arrows"></i>
      </Button>


      <Button
        type="primary"
        shape="circle"
        style="position: absolute; left: 90px; z-index: 200"
        title="打开切换卷帘"
        @click="openDeaeg"
      >
        <Icon type="md-crop" />
      </Button>
      <Button
          type="primary"
          shape="circle"

          style="position: absolute; left: 140px; z-index: 200"
          title="关闭卷帘"
          @click="closeDeaeg"
      >
        <Icon type="md-crop" />
      </Button>

      <Button
          type="primary"
          shape="circle"
          title="框选加载图层"
          style="position: absolute; left: 190px; z-index: 200"
          @click="drawectangleMap"
      >
        <Icon type="md-expand" />
      </Button>
      <Poptip
        style="position: absolute; left: 270px"
        placement="right-top"
        width="200"
        trigger="click"
        @on-popper-show="layerManage"
      >
        <Button shape="circle" title="图层管理">
          <img src="@/assets/icons/layers.svg" style="width: 20px" alt="" />
        </Button>
        <div slot="title"><i>图层服务</i></div>
        <div class="api" slot="content">
          <template>
            <Tree
              ref="cloudTreeServe"
              :data="treefather"
              show-checkbox
              @on-check-change="clicktreeChildren"
            ></Tree>
          </template>
        </div>
      </Poptip>

    </div>
    <!--  卷帘操作  -->
    <!--控制抽屉的左右按钮-->
    <div>
      <div
        class="leftDrawerButton"
        @click="leftDrawer = true"
        v-show="!leftDrawer"
      >
        <i class="fa fa-chevron-right"></i>
      </div>
      <div
        class="rightDrawerButton"
        @click="rightDrawer = true"
        v-show="!rightDrawer"
      >
        <i class="fa fa-chevron-left"></i>
      </div>
    </div>
  </div>
</template>
<script>
import fileCatalog from "../jobProcess/fileCatalog";
import taskAggregate from "./taskAggregate/taskAggregate";
import editManageModal from "../jobProcess/editManageModal";
import taskCreate from "./taskCreate"; //引用自定义的taskCreate.vue文件
import Vue from "vue"
import markDelog from "./common/markDelog";

import { collapseList } from "../../../public/static/js/commons";
import imageInfo from "./imageInfo";
const TABLELAYERID1 = "greenLineLayer"; //查询列表图层ID
const TABLELAYERID2 = "redLineLayer"; //查询列表高亮图层ID
const TABLELAYERID3 = "purpleLineLayer"; //数据维护列表高亮图层ID
const TABLEHIGHLAYERID1 = "greenLineLayer-high"; //优选列表图层ID
const TABLEHIGHLAYERID2 = "redLineLayer-high"; //优选列表高亮图层ID
const TABLEHIGHLAYERID3 = "purpleLineLayer-high"; //数据维护列表高亮图层ID

// 左侧表格搜索
const leftTable = {
  data() {
    return {
      // 左侧抽屉
      leftDrawer: true,
      /*** tab切换区域 ****/
      /*tab区域*/
      tabValue: "a",
      // 选择的区域
      selectCity: { city: [] },
      // 区域选择
      regionCascader: [],
      // 经纬度
      latitudeLongitude: {
        leftTopLat: 0,
        rightBottomLat: 0,
        leftTopLong: 0,
        rightBottomLong: 0,
      },
      /*******  左侧表单   ************/
      dicom: {
        type: 1,
        startResolution: 0.8,
        endResolution: 2,
        startdate: "",
        enddate: "",
        cloudslider: 10,
        satellite: [],
        sensor: [],
        productclass: [],
        coordinateSystem: [],
        QCresult: "",
      },
      /******   下面的表单的显示和隐藏   *******/
      setting: false,
      dicomDetail: {
        flowProduction: "",
        startdate: "",
        enddate: "",
        resolution: "",
        dataFormat: [],
      },
      /*应用数据 */
      currentRengionGeoJson: "",
      dataLayout: [],
      updateWkt: "",
      regionTitle: "",

      selectRow: [],
      isLoading: false,
      loadingText: "正在查询请稍后",
      sensorList: "",
      satelliteListt: [],
      imageTypedata: [
        // { label: "光学", value: "1" },
        // { label: "雷达", value: "1" },
        // { label: "航测", value: "1" },
        // { label: "光学", value: "1" },
      ],
      collapseList: JSON.parse(JSON.stringify(collapseList)),
      coordSystem: [
        {
          label: "WGS84",
          value: 0,
        },
        {
          label: "CGCS2000",
          value: 1,
        },
        {
          label: "XIAN80",
          value: 2,
        },
        {
          label: "BEIJING54",
          value: 3,
        },
      ],
      draw: {},
      eyeStates: false,
      eyeStates1: false,
      tableDataId: new Set(),

      ProductLevelClass: [
        { value: "一级产品", label: "一级产品" },
        { value: "全色正射", label: "全色正射" },
        { value: "多光谱正射", label: "多光谱正射" },
        { value: "融合影像", label: "融合影像" },
        { value: "真彩色影像", label: "真彩色影像" },
        { value: "镶嵌影像", label: "镶嵌影像" },
        { value: "标准分幅影像", label: "标准分幅影像" },
        { value: "DEM影像", label: "DEM影像" },
        { value: "DSM影像", label: "DSM影像" },
        // { value: "L1A", label: "原始影像L1A" },
        // { value: "L1B", label: "原始影像L1B" },
        // { value: "L2A", label: "辐射定标产品" },
        // { value: "L2B", label: "大气校正产品L2B" },
        // { value: "L3A", label: "基准网产品" },
        // { value: "L3B", label: "几何精矫正产品" },
        // { value: "L4A", label: "正射校正产品L4A" },
        // { value: "L4B", label: "正射校正产品L4B" },
        // { value: "L5A", label: "融合产品" },
        // { value: "L5A3", label: "真彩色产品" },
        // { value: "L5B", label: "匀色产品" },
        // { value: "L5C", label: "镶嵌产品" },
      ],
      disabledstartData: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
      single: false,
      QCresult: [
        {
          label: "不合格",
          value: "unqualified",
        },
        {
          label: "合格",
          value: "qualified",
        },
        //  {
        //   label: "未检查",
        //   value: "unchecked",
        // },
      ],
      disabledendData: {
        disabledDate(date) {
          return date && date.valueOf() > Date.now();
        },
      },
    };
  },
  mounted() {
    this.dealwithCollapseList();
    this.searchprovince();
    this.getImageTypeList();
    this.getSatelliteList();
    this.getSensorList();
    this.getCoordinateSystem();
    this.drawectangle();
  },
  methods: {
    getCoordinateSystem() {
      let that = this;
      let path = this.$api.dataOptimizationApi.getcoordinateSystem;
      that.coordSystem = [];
      this.http.get(path).then((res) => {
        if (res.data.message) {
          res.data.data.forEach((ele) => {
            that.coordSystem.push({
              label: ele,
              value: ele,
            });
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    /**  顶部操作  **/
    //清除按钮
    clearList() {
      (this.currentRengionGeoJson = ""),
        (this.dicomDetail = {
          flowProduction: "",
          startdate: "",
          enddate: "",
          resolution: "",
          dataFormat: [],
        }),
        (this.dicom = {
          type: 1,
          startResolution: 0.8,
          endResolution: 2,
          startdate: "",
          enddate: "",
          cloudslider: 10,
          satellite: [],
          sensor: [],
          productclass: [],
          coordinateSystem: [],
          QCresult: "",
        }),
        (this.selectCity = {
          city: [],
        });
      this.regionCascader = [
        // {
        //   label: "全国",
        //   value: 0,
        //   loading: false,
        //   tag: "china",
        //   code: "0",
        //   children: [],
        // },
        // { label: "其他", value: 1, loading: false, tag: "other", code:1,children: [] },
      ];
      this.latitudeLongitude = {
        leftTopLat: 0,
        rightBottomLat: 0,
        leftTopLong: 0,
        rightBottomLong: 0,
      };
      let that = this;
      this.dealwithCollapseList();
      that.initMap();
      this.drawectangle();
      this.searchprovince();
      this.getImageTypeList();
      this.getSatelliteList();
      this.getSensorList();

      this.$refs.Cascader.clearSelect();
      let data = new Set();
      this.queryDataList.forEach((ele) => {
        data.add(ele.id);
        if (this.tableDataId.has(ele.id)) {
          this.tableDataId.delete(ele.id);
        }
      });
      this.queryDataList = this.queryDataList.filter((item) => {
        if (!data.has(item.id)) {
          this.$set(item, "_checked", false);
          return true;
        } else {
          return false;
        }
      });
      this.eyeStates = false;
      this.eyeStates1 = false;
      this.$refs.uploadShpFile.clearFiles();
      this.selectRow = [];
      this.maintenanceData = [];
      this.variableData = [];
      this.variableDataAll = [];
      this.manageTotalSize = 0;
      this.managerselectRow = [];
      this.treefather=[]
    },
    // 对数据添加checked属性
    dealwithCollapseList() {
      let _this = this;
      _this.collapseList.forEach((ele) => {
        ele.children.forEach((item) => {
          item.checked = false;
          item.sensor.forEach((m) => {
            // m.checked = false; 有问题 设置之后父与子不联动
          });
        });
      });
    },

    // 添加框选
    drawectangle() {
      let _this = this;
      var modes = MapboxDraw.modes;
      modes.draw_rectangle = DrawRectangle.default;
      this.draw = new MapboxDraw({
        modes: modes,
        displayControlsDefault: false,
      });
      this.map.addControl(this.draw, "top-right"); // 添加插件
      this.map.on("draw.create", function (feature) {
        if (_this.drawType==="jiazai"){


        //  var featuresList = _this["map"].queryRenderedFeatures([feature.features[0].geometry.coordinates[0][1],feature.features[0].geometry.coordinates[0][3]]);
          var featuresList = _this["map"].queryRenderedFeatures(feature);
          let mapList = [];
          if (!featuresList.length) return;
          featuresList.forEach((item)=>{
            if (item.properties&&item.properties.dataInfo) {
              mapList.push(JSON.parse(item.properties.dataInfo))
            }
          });
          _this.getNewGetColumns(mapList);
          _this.draw.deleteAll();
        }else{
          _this.latitudeLongitude.leftTopLat =
              feature.features[0].geometry.coordinates[0][0][0];
          _this.latitudeLongitude.leftTopLong =
              feature.features[0].geometry.coordinates[0][1][1];
          _this.latitudeLongitude.rightBottomLat =
              feature.features[0].geometry.coordinates[0][2][0];
          _this.latitudeLongitude.rightBottomLong =
              feature.features[0].geometry.coordinates[0][2][1];
        }


      });
    },

    searchprovince() {
      let self = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: 0,
          },
        ],
        queryResultList: ["name", "code"],
        // queryResultList: [],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      self.http.postText(path, sendData).then((res) => {
        if (res.data.code == 0) {
          let province = res.data.data.data;
          for (let i = 0; i < province.length; i++) {
            let tempdata = {
              code: province[i].properties.code,
              label: province[i].properties.name,
              value: province[i].properties.name, //可以不写 但是字体会变颜色
              children: [],
              loading: false,
              tag: "province",
            };
            self.regionCascader.push(tempdata);
          }
        }
      });
    },
    getImageTypeList() {
      let that = this;
      let path = this.$api.dataOptimizationApi.getImageTypeList;
      that.imageTypedata = [];
      this.http.get(path).then((res) => {
        if (res.data.success) {
          res.data.data.forEach((ele) => {
            that.imageTypedata.push({ label: ele.imageType, value: ele.id });
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getSatelliteList() {
      let that = this;
      let path = this.$api.dataOptimizationApi.getSatelliteList;
      that.satelliteListt = [];
      this.http.get(path).then((res) => {
        if (res.data.success) {
          res.data.data.forEach((ele) => {
            that.satelliteListt.push({
              label: ele.satelliteName,
              value: ele.satelliteName,
            });
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    getSensorList() {
      if (this.dicom.satellite.length) {
        let that = this;
        let path = this.$api.dataOptimizationApi.ISSListByCondition;
        that.sensorList = [];
        this.dicom.satellite.forEach((ele) => {
          let aa = ele + "";
          let sensorListISSListByCondition = {
            satelliteName: aa,
            pageNum: 0,
            pageSize: 0,
          };
          this.http.post(path, sensorListISSListByCondition).then((res) => {
            if (res.data.data.list.length) {
              res.data.data.list.forEach((ele) => {
                this.sensorList.push({
                  label: ele.sensorName,
                  value: ele.sensorName,
                });
              });
              let obj = {};
              this.sensorList = this.sensorList.reduce((item, next) => {
                if (!obj[next.value]) {
                  item.push(next);
                  obj[next.value] = true;
                }
                return item;
              }, []);
            }
          });
        });
      } else {
        let path = this.$api.dataOptimizationApi.getSensorList;
        this.sensorList = [];
        this.http.get(path).then((res) => {
          if (res.data.success) {
            res.data.data.forEach((ele) => {
              this.sensorList.push({
                label: ele.sensorName,
                value: ele.sensorName,
              });
            });
            let obj = {};
            this.sensorList = this.sensorList.reduce((item, next) => {
              if (!obj[next.value]) {
                item.push(next);
                obj[next.value] = true;
              }
              return item;
            }, []);
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }
    },
    // 搜索表格
    searchList() {
      this.clearSelectimg();
      let that = this;
      if (this.bannerName == "name3" || this.bannerName == "name2") return;
      //  let param = this.searchListData();
      let path = this.$api.dataOptimizationApi.queryDataScheme;
      this.http.post(path, this.searchListData()).then((res) => {
        if (res.data.code == 0) {
          this.loadingText = "已成功查询，正在加载图层~";
          let tempData = res.data.data.pageData;
          that.queryDataList = tempData;
          that.selectRow = JSON.parse(JSON.stringify(tempData));

          if (tempData.length < 1) {
            this.$Message.info("未查到相关数据");
          }

          let layerId = TABLELAYERID1; //查询列表图层
          this.clearLineLayer(layerId);
          this.getFeatureGeoJson(layerId, that.queryDataList);
          this.drawLineLayer(layerId, that.queryGeoJsonList,"map");
          this.drawLineLayer(layerId, that.queryGeoJsonList,"beforeMap");
          this.hightLayer(layerId, that.queryGeoJsonList,"map");
          this.hightLayer(layerId, that.queryGeoJsonList,"beforeMap");
          this.isLoading = false;
          this.loadingText = "正在查询请稍后~";
        } else {
          this.isLoading = false;
          this.$Message.error(res.data.message);
        }
      });
      this.dicom.cloudslider = 10;
    },
    //当前数据
    searchListData() {
      let that = this;
      this.eyeStates = false;
      this.eyeStates1 = false;
      // this.clearSelectimg();
      this.thumbnaildata = [];
      this.clearSelectimg();
      if (this.drawRectangleflag) {
        this.drawRectangleflag = false;
        this.getLocation();
      }
      // let param = that.formListData();

      // if(typeof(this.currentRengionGeoJson) == Object ){
      //       this.currentRengionGeoJson = JSON.stringify(this.currentRengionGeoJson)

      // }
      // else if(this.currentRengionGeoJson && typeof(this.currentRengionGeoJson) != Object )
      // this.currentRengionGeoJson = this.currentRengionGeoJson
      // else
      //       this.currentRengionGeoJson = ""

      if (this.currentRengionGeoJson) {
        if (this.currentRengionGeoJson instanceof Object)
          this.currentRengionGeoJson = JSON.stringify(
            this.currentRengionGeoJson
          );
      } else this.currentRengionGeoJson = "";
      let arr = this.dicom.coordinateSystem;
      let arr1 = [];
      if (typeof arr === "string") {
        arr1 = arr.split(",");
      }

      let arr2 = this.dicomDetail.dataFormat;
      let arr3 = [];
      if (typeof arr2 === "string") {
        arr3 = arr2.split(",");
      }
      if (!this.single) {
        this.dicom.cloudslider = "";
      }

      let param = {
        cloud_cover: this.dicom.cloudslider,
        image_gsd_from: this.dicom.startResolution,
        image_gsd_to: this.dicom.endResolution,

        image_range: this.currentRengionGeoJson,
        image_shoot_time_from: this.dicom.startdate
          ? this.$moment(this.dicom.startdate).format("YYYY-MM-DD")
          : "",
        image_shoot_time_to: this.dicom.enddate
          ? this.$moment(this.dicom.enddate).format("YYYY-MM-DD")
          : "",
        labels: [],
        crs: arr1,
        product_level: this.dicom.productclass,
        sat_type: this.dicom.satellite,
        produce_alg: this.dicomDetail.resolution,
        sensor_type: this.dicom.sensor,
        image_type: this.dicom.type,
        // imageTypedata: this.imageTypedata,
        image_format: arr3,
        produce_time_from: this.dicomDetail.startdate,
        produce_time_to: this.dicomDetail.enddate,
        produce_workflow: this.dicomDetail.flowProduction,
        quality_inspection_result: this.dicom.QCresult,
      };
      return param;
    },
    /***  tab 切换区域操作  ***/
    // 懒加载区域选择下拉
    loadRegionData(item, callback) {
      let _this = this;
      item.loading = true;
      setTimeout(() => {
        if (item.tag === "other") {
          item.children = [
            {
              value: "重点区域",
              label: "某重点区域",
              tag: "other",
              code: 1,
              classify: "other",
            },
          ];
        } else if (item.tag === "china") {
          _this.searchCity(item, callback, "china");
        } else if (item.tag === "province") {
          _this.searchCity(item, callback, "city");
        } else if (item.tag === "city") {
          _this.searchCity(item, callback, "region");
        }
        item.loading = false;
        callback();
      }, 500);
    },
    searchCity(item, callback, tag) {
      let _this = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      let typeValue;
      if (tag === "city") {
        typeValue = 1;
      } else if (tag === "region") {
        typeValue = 2;
      } else if (tag === "china") {
        typeValue = -1;
      } else {
        return;
      }
      let param = {
        collectionName: "area_info",
        orderColName: "code",
        outputEpsg: 4326,
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: typeValue,
            relationNextOne: "AND",
          },
          {
            compareOp: "=",
            fieldName: "parent_code",
            fieldValue: item.code,
          },
        ],
        queryResultList: ["name", "code"],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        for (let j = 0; j < data.length; j++) {
          let tempdata = {
            value: data[j].properties.name,
            code: data[j].properties.code,
            label: data[j].properties.name,
            children: [],
            loading: false,
            tag: tag,
          };
          if (tag === "region" || tag === "china") {
            delete tempdata.children;
            delete tempdata.loading;
          }
          item.children.push(tempdata);
        }
        item.loading = false;
        callback();
      });
    },
    // 选择的区域发生变化时
    regionChangeEvent(value, selectedData) {
      if (selectedData.length < 1) return;
      let item = selectedData[selectedData.length - 1];
      this.regionTitle = value.join("/");
      if (item.tag === "china" || item.tag === "other") {
        // this.region["name"] = item.label;
        this.region["geometry"] = item.geometry;
        this.region["code"] = item.code;
        // this.region["classify"] = item.classify;
      } else {
        this.searchGeometryByCode(item);
      }
    },
    searchGeometryByCode(item) {
      let _this = this;
      let path = this.$api.processingApi.queryFeatureBase64;
      let type = 0;
      if (item.tag === "city") type = 1;
      else if (item.tag === "region") type = 2;
      let param = {
        collectionName: "area_info",
        outputEpsg: 4326,
        orderColName: "code",
        queryConditionList: [
          {
            compareOp: "=",
            fieldName: "type",
            fieldValue: type,
            relationNextOne: "AND",
          },
          {
            compareOp: "=",
            fieldName: "code",
            fieldValue: item.code,
          },
        ],
        queryResultList: [],
      };
      let strJson = JSON.stringify(param);
      let sendData =  this.$Base64.encode(strJson);
      _this.http.postText(path, sendData).then((res) => {
        let data = res.data.data.data;
        if (res.data.code == 0) {
          this.drawGeometry(data[0].geometry,"map");
          this.drawGeometry(data[0].geometry,"beforeMap");
          _this.currentRengionGeoJson = data[0].geometry;
        } else {
          _this.$Message.error(res.data.message);
        }
      });
    },
    //定位
    getLocation() {
      let that = this;
      this.draw.deleteAll();
      this.clearLineLayer("locationId")
      let data = [
        [this.latitudeLongitude.leftTopLat, this.latitudeLongitude.leftTopLong],
        [
          this.latitudeLongitude.rightBottomLat,
          this.latitudeLongitude.leftTopLong,
        ],
        [
          this.latitudeLongitude.rightBottomLat,
          this.latitudeLongitude.rightBottomLong,
        ],
        [
          this.latitudeLongitude.leftTopLat,
          this.latitudeLongitude.rightBottomLong,
        ],
        [this.latitudeLongitude.leftTopLat, this.latitudeLongitude.leftTopLong],
      ];
      this.currentRengionGeoJson = {
        type: "Polygon",
        coordinates: [data],
      };
      let source={type: "geojson", data: {
          type: "Feature",
          geometry: {
            type: "Polygon",
            coordinates: [data],
          },
          properties: {},
        },}
      let mapLayer={
        id: "locationId",
        type: "fill",
        source: "location",
        layout: {},
        paint: {
          "fill-color": "#3bb2d0",
          "fill-outline-color": "green",
          "fill-opacity": 0.2,
        },
      }
      const flay={
        center: [
          (this.latitudeLongitude.leftTopLat +
              this.latitudeLongitude.rightBottomLat) /
          2,
          (this.latitudeLongitude.leftTopLong +
              this.latitudeLongitude.rightBottomLong) /
          2,
        ],
        curve: 1.42,
      }

      this.map.addSource("location", source);
      this.map.addLayer(mapLayer);
      this.map.flyTo(flay);
      this.beforeMap.addSource("location", source);
      this.beforeMap.addLayer(mapLayer);
      this.beforeMap.flyTo(flay);

    },
    // 绘制矩形
    drawRectangle() {
      this.drawType=""
      this.draw.deleteAll();

      this.clearLineLayer("location")
      this.clearLineLayer("locationId")
      this.draw.changeMode("draw_rectangle");
      this.drawRectangleflag = true;
    },
    // 文件上传
    onError() {
      this.$Message.info("上传失败!");
    },
    onSuccess(response, file, fileList) {
      this.currentRengionGeoJson = response.data.geomGeojson;
      this.updateWkt = response.data.geomWkt;

      this.clearSelectimg("uploadFile")
      this.clearSelectimg("uploadFileFF")

      let source={
        type: "geojson",
        data: {
          type: "Feature",
          geometry: JSON.parse(response.data.geomGeojson),
          properties: {},
        },
      }
      let mapLayer={
        id: "uploadFile",
        type: "fill",
        source: "uploadFileFF",
        layout: {},
        paint: {
          "fill-color": "#3bb2d0",
          "fill-outline-color": "green",
          "fill-opacity": 0.2,
        },
      }

      this.map.addSource("uploadFileFF", source);
      this.map.addLayer(mapLayer);
      this.beforeMap.addSource("uploadFileFF", source);
      this.beforeMap.addLayer(mapLayer);
    },
    /****  显示下面的搜索项 ******/
    bottomDrawer() {
      this.setting = !this.setting;
      this.getdataLayout();
    },
    getdataLayout() {
      let that = this;
      that.dataLayout = [];
      let path = this.$api.dataOptimizationApi.getdataLayout;
      this.http.get(path).then((res) => {
        if (res.data.message) {
          res.data.data.forEach((ele) => {
            that.dataLayout.push({
              label: ele,
              value: ele,
            });
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
  },
  watch: {
    tabValue(val) {
      if (val !== "c") {
        this.draw.deleteAll();
        this.clearLineLayer("locationId");
        this.clearLineLayer("location");
      } else if (val !== "d") {
        this.clearLineLayer("uploadFile");
        this.clearLineLayer("uploadFileFF");
      }
    },
  },
};
// 右侧表格
const rightSoure = {
  data() {
    return {
      // 右侧抽屉
      rightDrawer: true,
      bannerName: "name1",
      getColumnsData: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          key: "fileExistFlag",
          title: "实体状态",
          width: 100,
          slot: "fileExistFlag",
          align: "center",
        },
        {
          title: "缩略图",
          key: "img",
          slot: "img",
          width: 90,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("span", {
                domProps: {
                  innerHTML: this.eyeStates
                    ? '<i class="fa fa-eye"></i>'
                    : '<i class="fa fa-eye-slash"></i>',
                },
                on: {
                  click: () => {
                    this.getNewGetColumns(this.maintenanceData);
                  },
                },
              }),
            ]);
          },
        },

        {
          key: "image_name",
          title: "数据名称",
          width: 400,
          resizable: true,
          align: "center",
          slot: "image_name",
          // render: (h, params) => {
          //   return this.editblockManage("image_name", h, params);
          // },
        },
        {
          key: "quality_inspection_result",
          title: "质检结果",
          align: "center",
          // slot: "quality_inspection_result",
          width: 100,
          render: (h, params) => {
            return this.editblockManage0(
              "quality_inspection_result",
              h,
              params
            );
          },
        },
        {
          key: "image_gsd",
          title: "分辨率",
          width: 90,
          align: "center",
          render: (h, params) => {
            return this.editblockManage("img_gsd", h, params);
          },
        },
        {
          key: "image_shoot_time",
          title: "拍摄时间",
          width: 180,
          align: "center",
        },
        {
          key: "cloud_cover",
          title: "云量",
          width: 100,
          align: "center",
          render: (h, params) => {
            return this.editblockManage1("cloud_cover", h, params);
          },
        },
        {
          key: "sensor_type",
          title: "传感器",
          width: 100,
          align: "center",
        },
        {
          key: "product_level",
          title: "产品类型",
          width: 130,
          align: "center",
          render: (h, params) => {
            return this.editblockManage2("product_level", h, params);
          },
        },
        {
          key: "crs",
          title: "坐标系",
          width: 150,
          align: "center",
          render: (h, params) => {
            return this.editblockManage3("crs", h, params);
          },
        },
        {
          key: "produce_alg",
          title: "处理算法",
          width: 100,
          align: "center",
        },
        {
          key: "image_format",
          title: "数据格式",
          width: 100,
          align: "center",
        },
        {
          key: "produce_time",
          title: "生产时间",
          width: 180,
          align: "center",
        },
        {
          key: "produce_workflow",
          title: "生产流程",
          width: 220,
          align: "center",
        },
      ],

      /******  第一个表格数据  *******/
      getColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        // {
        //   title: "序号",
        //   type: "index",
        //   width: 65,
        //   align: "center",
        // },
        {
          title: "缩略图",
          key: "",
          slot: "img",
          width: 90,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("span", {
                domProps: {
                  innerHTML: this.eyeStates
                    ? '<i class="fa fa-eye"></i>'
                    : '<i class="fa fa-eye-slash"></i>',
                },
                on: {
                  click: () => {
                    this.getNewGetColumns(this.queryDataList);
                  },
                },
              }),
            ]);
          },
        },
        {
          key: "image_name",
          title: "数据名称",
          minWidth: 100,
          slot: "image_name",
          align: "center",
          maxWidth: "auto",
        },
        {
          key: "quality_inspection_result",
          title: "质检结果",
          align: "center",
          slot: "quality_inspection_result",
          width: 100,
        },
        {
          key: "image_shoot_time",
          title: "时相",

          align: "center",
          width: 170,
          maxWidth: "auto",
        },
        {
          key: "cloud_cover",
          title: "云量(%)",
          align: "center",
          width: 90,
          maxWidth: "auto",
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  on: {
                    click: () => {
                      this.tableRowClickEvent(params.row);
                    },
                    mouseenter: () => {
                      this.tableMouseEnter(params.row, TABLEHIGHLAYERID1); //点击事件
                    },
                    mouseout: () => {
                      this.tableMouseOut(TABLEHIGHLAYERID1); //点击事件
                    },
                    dblclick: () => {
                      this.tableRowClickEvent(params.row);
                    },
                  },
                },
                params.row.cloud_cover
              ),
            ]);
          },
        },
      ],
      queryDataList: [],
      /*********  第二个表格数据   ***********/
      getColumn: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          key: "fileExistFlag",
          title: "实体状态",
          width: 100,
          slot: "fileExistFlag",
          align: "center",
        },
        // {
        //   title: "序号",
        //   type: "index",
        //   width: 65,
        //   align: "center",
        // },
        {
          title: "缩略图",
          key: "",
          slot: "img",
          width: 90,
          align: "center",
          renderHeader: (h, params) => {
            return h("div", [
              h("span", {
                domProps: {
                  innerHTML: this.eyeStates1
                    ? '<i class="fa fa-eye"></i>'
                    : '<i class="fa fa-eye-slash"></i>',
                },
                on: {
                  click: () => {
                    this.getNewGetColumns(this.resultTableData);
                  },
                },
              }),
            ]);
          },
        },
        {
          key: "image_name",
          title: "数据名称",
          minWidth: 100,
          slot: "image_name",
          align: "center",
          maxWidth: "auto",
        },

        {
          key: "cloud_cover",
          title: "云量",
          align: "center",
          width: 90,
          maxWidth: "auto",
          render: (h, params) => {
            return h("div", [
              h(
                "a",
                {
                  on: {
                    dblclick: () => {
                      this.tableRowClickEvent(params.row);
                    },
                    click: () => {
                      this.tableRowClickEvent(params.row);
                    },
                    mouseenter: () => {
                      this.tableMouseEnter(params.row, TABLEHIGHLAYERID2); //点击事件
                    },
                    mouseout: () => {
                      this.tableMouseOut(TABLEHIGHLAYERID2); //点击事件
                    },
                  },
                },
                params.row.cloud_cover
              ),
            ]);
          },
        },
        {
          key: "image_shoot_time",
          title: "时相",
          width: 180,

          align: "center",
        },
      ],
      resultTableData: [],
      selectResultRow: [],

      /***********  第三个table数据      *****************/
      maintenanceData: [],

      variableDataAll: [],
      variableData: [],
      pageSizeData: 100,
      resultTableDataId: new Set(),
      taskSetList: [],
      paramsData: {},
      pageNumer: 1,
      nameeye: false,
      manageTotalSize: 0,
      thumbnaildata: [],
      name3Boolean: false,
      creatTaskData: [],
      Uid: [],
    };
  },
  methods: {
    clickTabPane(name) {
      if (name == "name2") {
        // this.imageText =   JSON.parse(JSON.stringify(this.thumbnaildata))
        // this.modal12 = false;
        if (this.selectRow.length != 0) {
          this.variableData = JSON.parse(JSON.stringify(this.selectRow));
        }
        this.variableDataAll = JSON.parse(JSON.stringify(this.queryDataList));
        this.onTableSelectAllCancel([], "purpleLineLayer");
        this.bannerName = "name2";
        this.nameeye = true;
        this.clearSelectimg();
        this.thumbnaildata = [];
        //  this.$forceUpdate( this.selectRow)
        this.importSelectbyId(); //右边表格自动获取
      } else if (name == "name1") {
        this.selectRow = [];
        this.bannerName = "name1";
        this.onTableSelectAllCancel([], "purpleLineLayer");
        this.queryTableSelectEvent(this.variableData);
        if (this.variableDataAll.length != 0) {
          this.selectRow = this.variableData;
          //  this.eyeStates = true
          this.variableData = [];
        }
        this.queryDataList = this.variableDataAll;
        this.nameeye = false;
        this.eyeStates1 = false;
        this.clearSelectimg();
        this.eyeStates = false;
        this.thumbnaildata = [];
        this.freashImage();
      } else if (name == "name3") {
        this.nameeye = false;
        if (this.selectRow.length != 0) {
          this.variableData = JSON.parse(JSON.stringify(this.selectRow));
        }
        this.variableDataAll = JSON.parse(JSON.stringify(this.queryDataList));
        this.modal12 = false;
        this.clearSelectimg();
        this.onTableSelectAllCancel([], "greenLineLayer");
        this.onTableSelectAllCancel([], "redLineLayer");
        this.bannerName = "name3";
        this.name3Boolean = true;
        this.searchDataList();
      }
    },
    //更新原来有的缩略图
    freashImage() {
      this.queryDataList.map((ele) => {
        if (ele.colorName == "#2d8cf0") {
          this.imageServeDetail(ele);
          this.thumbnaildata.push(ele);
        }
      });
    },

    /****  table公用的方法  *****/
    // 查询和优选列表全选事件
    onTableSelectAll(selection, layerId) {
      if (layerId === TABLELAYERID1) {
        this.selectRow = selection;
        this.selectAllDetail1();
      } else if (layerId === TABLELAYERID2) {
        this.selectResultRow = selection;
        this.selectAllDetail2();
      } else if (layerId === TABLELAYERID3) {
        this.managerselectRow = selection;
        this.selectAllDetail3();
      }
      this.selectFeature(selection, layerId);
    },
    //全选处理事件
    selectAllDetail1() {
      let aa = this.queryDataList;
      aa.forEach((ele) => {
        ele._checked = true;
      });
      this.queryDataList = aa;
    },
    selectAllDetail2() {
      let aa = this.resultTableData;
      aa.forEach((ele) => {
        ele._checked = true;
      });
      this.resultTableData = aa;
    },
    selectAllDetail3() {
      let aa = this.maintenanceData;
      aa.forEach((ele) => {
        ele._checked = true;
      });
      this.maintenanceData = aa;
    },
    //显示要素
    selectFeature(selection, layerId) {
      //  console.log( layerId,'selection, layerId)selection, layerId)')
      let arr = ["any"];
      selection.forEach((item) => {
        arr.push(["==", ["get", "id"], item.id]);
      });
      this.map.setFilter(layerId, arr);
      this.beforeMap.setFilter(layerId, arr);
    },

    // 查询和优选列表全部取消事件
    onTableSelectAllCancel(selection, layerId) {
      if (layerId === TABLELAYERID1) {
        this.selectRow = selection;
        this.selectAllDetailCancle1();
      } else if (layerId === TABLELAYERID2) {
        this.selectResultRow = selection;
        this.selectAllDetailCancle2();
      } else if (layerId === TABLELAYERID3) {
        this.managerselectRow = selection;
        this.selectAllDetailCancle3();
      }
      this.cancelSelectFeature(selection, layerId);
    },
    selectAllDetailCancle1() {
      let aa = this.queryDataList;
      aa.forEach((ele) => {
        ele._checked = false;
      });
      this.queryDataList = aa;
    },
    selectAllDetailCancle2() {
      let aa = this.resultTableData;
      aa.forEach((ele) => {
        ele._checked = false;
      });
      this.resultTableData = aa;
    },
    selectAllDetailCancle3() {
      let aa = this.maintenanceData;
      aa.forEach((ele) => {
        ele._checked = false;
      });
      this.maintenanceData = aa;
    },
    //取消要素显示
    cancelSelectFeature(selection, layerId) {
      let tempData = this.queryDataList;
      let arr = ["all"];
      if (layerId === TABLELAYERID2) {
        tempData = this.resultTableData;
      }
      if (layerId === TABLELAYERID3) {
        tempData = this.maintenanceData;
      }
      if (selection.length < 1) {
        //都不显示
        tempData.forEach((ele) => {
          arr.push(["!=", ["get", "id"], ele.id]);
        });
      }
      //选中的图层要素都显示
      selection.forEach((item) => {
        arr.push(["==", ["get", "id"], item.id]);
      });

      this.map.setFilter(layerId, arr);
      this.beforeMap.setFilter(layerId, arr);
    },

    /**
     *   img底下图片更改
     * */
    getMapimgdata(data) {
      this.thumbnaildata.push(data);
      if (data.colorName === "#2d8cf0") {
        this.clearLineLayer(data.id);
        this.clearLineLayer(data.id + "-img");
        this.$set(data, "colorName", "#b0b4bd");
      } else {
        let imagePathsuffix = false;
        let imagePath = data.image_src_path;
        let a = imagePath.split("").reverse().join("");
        let b = a.substring(0, a.search(/\./)).split("").reverse().join("");
        if (b == "gz" || b == "tar" || b == "zip") {
          imagePathsuffix = true;
        }
        if (data.product_level == "一级产品" && imagePathsuffix) {
          let aa = data.image_range.coordinates[0];
          aa.splice(4, 1);
          if (data.colorName === "#2d8cf0") {
            this.$set(data, "colorName", "#b0b4bd");
          } else {
            this.$set(data, "colorName", "#2d8cf0");
            let path = this.$api.dataOptimizationApi.getLevelImageFile + "?path=" + data.thumbnail_path;
            let layerMessage={id: data.id, source: {type: "image", url: path, coordinates: aa,}, type: "raster",}
            this.map.addLayer(layerMessage);
            this.beforeMap.addLayer(layerMessage);
          }
        } else {
          this.imageServeDetail(data);
        }
      }
      this.getReturnImg(data);
    }, //对里面的数据进行重置

    //对服务进行处理
    imageServeDetail(data) {
      this.$set(data, "colorName", "#2d8cf0");
      let pathimage = [];
      let pathimage1 = {
        path: data.image_store_path,
        style: { stretch: { externalNodataValue: 0 } },
      };
      pathimage.push(pathimage1);
      JSON.stringify(pathimage);
      //图片地址
      let path = this.$api.dataOptimizationApi.getLevelImageFile + "?path=" + data.thumbnail_path;
      //服务地址
      let tile = mapServeUrl + "/image-server/v1" + '?request=GetTile&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&info={"info":' + JSON.stringify(pathimage) + "}";
      let nn = [];
      nn.push(data.image_range.coordinates);
      let bb = nn[0].splice(4, 1);

      let sourceData={
        type: "raster",
        tiles: [tile],
        tileSize: 256,
      }

      let videoLayer = {
        id: data.id,
        type: "raster",
        source: data.id,
        minzoom: 11,
        maxzoom: 20,
        paint: {
          "raster-opacity": 1,
        },
      };
      this.map.addSource(data.id,sourceData );
      this.map.addLayer(videoLayer);
      this.beforeMap.addSource(data.id,sourceData );
      this.beforeMap.addLayer(videoLayer);


      //添加服务
      let aa = data.image_range.coordinates[0];
      aa.splice(4, 1);

      let mapLayerList= {
        id: data.id + "-img",
        source: {
          type: "image",
          url: path,
          coordinates: aa,
        },
        minzoom: 1,
        maxzoom: 11,
        type: "raster",
      }
      this.map.addLayer(mapLayerList, data.id);
      this.beforeMap.addLayer(mapLayerList, data.id);
    },
    getReturnImg(data) {
      if (this.bannerName == "name1") {
        let aa = this.queryDataList.map((ele) => {
          if (ele.id == data.id) {
            ele = data;
          }
          return ele;
        });
        this.queryDataList = aa;
      }
    },
    tableRowClickEvent(row) {
      this.$refs.refImageInfoModal.open();
      this.infoData = {
        data: row,
        flag: "optimization",
      };
    },



    //图层高亮显示
    tableMouseEnter(data, layerId) {
      this.map.setFilter(layerId, ["in", "id", data.id]);//id 为feature的属性properties
      this.beforeMap.setFilter(layerId, ["in", "id", data.id]);
    },
    // 图层取消高亮显示
    tableMouseOut(layerId) {
      this.map.setFilter(layerId, ["in", "id", ""]);
      this.beforeMap.setFilter(layerId, ["in", "id", ""]);
    },
    /******  第一个 table 操作    *********/
    //查询列表表格选中事件
    queryTableSelectEvent(selection, row) {
      if (row) {
        let aa = this.queryDataList.map((ele) => {
          if (ele.id == row.id) {
            ele._checked = true;
          }
          return ele;
        });
        this.queryDataList = aa;
      }
      this.selectRow = selection;
      this.selectFeature(selection, TABLELAYERID1);
    },
    //查询列表表格取消事件
    queryTableSelectCancelEvent(selection, row) {
      let aa = this.queryDataList.map((ele) => {
        if (ele.id == row.id) {
          ele._checked = false;
        }
        return ele;
      });
      this.queryDataList = aa;
      this.tableSelectCancelEvent(selection, TABLELAYERID1, row);
    },
    // 表格单击勾选取消事件
    tableSelectCancelEvent(selection, layerId, row) {
      let tempData = this.selectRow;
      if (layerId === TABLELAYERID2) {
        tempData = this.selectResultRow;
      }
      this.selectFeature(selection, layerId);
      let index = tempData.map((ele) => ele.id).indexOf(row.id);
      tempData.splice(index, 1);
    },
    //导入数据
    importData() {
      let that = this;
      let flag = false; //用于标识是否有新数据导入
      this.Uid = [];
      //选中的数据先去遍历查询是否存在如果不存在调用新增接口如果存在直接查询当前用户的数据
      this.selectRow.forEach((ele) => {
        if (!this.resultTableDataId.has(ele.id)) {
          flag = true;
          this.resultTableDataId.add(ele.id);
          this.Uid.push(ele.id);
        } else {
          return;
        }
      });
      let pathdataList = this.$api.dataOptimizationApi.addDataList;
      this.http.post(pathdataList, this.Uid).then((res) => {
        if (res.data.code == 0) {
          // this.$Message.info(res.data.message);
          this.importSelectbyId();
        } else {
          this.$Message.error(res.data.message);
        }
      });

      if (!flag) {
        this.$Message.info("选择数据已重复或者未勾选数据！");
      } else {
        this.$Message.info("导入成功");
      }
    },
    //导入数据函数
    importSelectbyId() {
      let that = this;
      this.resultTableData = [];
      let path = this.$api.dataOptimizationApi.selectDataList;
      this.http.get(path).then((res) => {
        if (res.data.code == 0) {
          res.data.data.forEach((res) => {
            let assignSatellite = Object.assign(res.satellite_image);
            this.resultTableData.push(assignSatellite);
            this.selectResultRow = this.resultTableData;
            let layerId = TABLELAYERID2;
            this.clearLineLayer(layerId);
            this.getFeatureGeoJson(layerId, this.resultTableData);
            this.drawLineLayer(layerId, this._filterGeoJsonList,"map");
            this.drawLineLayer(layerId, this._filterGeoJsonList,"beforeMap");
            this.hightLayer(layerId, this._filterGeoJsonList,"map");
            this.hightLayer(layerId, this._filterGeoJsonList,"beforeMap");
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });
    },
    /***********   第二个table表格操作    ****************/
    //优选列表表格选中事件
    queryTableSelectEvent1(selection, row) {
      let aa = this.resultTableData.map((ele) => {
        if (ele.id == row.id) {
          ele._checked = true;
        }
        return ele;
      });
      this.resultTableData = aa;
      this.selectResultRow = selection;
      this.selectFeature(selection, TABLELAYERID2);
    },

    //优选列表表格取消事件
    queryTableSelectCancelEvent1(selection, row) {
      // row._checked=false
      let aa = this.resultTableData.map((ele) => {
        if (ele.id == row.id) {
          ele._checked = false;
        }
        return ele;
      });
      this.resultTableData = aa;
      this.tableSelectCancelEvent1(selection, TABLELAYERID2, row);
    },
    tableSelectCancelEvent1(selection, layerId, row) {
      let tempData = this.selectRow;
      if (layerId === TABLELAYERID2) {
        tempData = this.selectResultRow;
      }

      this.selectFeature(selection, layerId);
      let index = tempData.map((ele) => ele.id).indexOf(row.id);
      // tempData.splice(index, 1);
    },
    // 删除
    clearTableListdata() {
      let that = this;
      let querylist = [];
      that.selectResultRow.forEach((ele) => {

        this.clearLineLayer(ele.id)
        this.clearLineLayer(ele.id + "-img")

        querylist.push(ele.id);
      });
      this.http
        .post(that.$api.dataOptimizationApi.deleteBySearchIds, querylist)
        .then((item) => {
          if (item.data.code === 0) {
            that.$Message.success("删除成功!");
            this.importSelectbyId();
            querylist.forEach((ele) => {
              if (this.resultTableDataId.has(ele)) {
                this.resultTableDataId.delete(ele);
              }
            });

            let deletearr = [...this.resultTableData].filter((x) =>
              [...this.selectResultRow].every((y) => y.id !== x.id)
            );
            this.selectResultRow = deletearr;
            this.selectFeature(this.selectResultRow, "redLineLayer");

            // that.resultTableDataId.clear();
            //  this.$refs.selection1.clearSelect();
            // this.resultTableData=[]
            // this.queryTableSelectEvent1()
            // this.selectFeature(this.resultTableData, TABLELAYERID2);
          } else {
            that.$Message.error("删除失败");
          }
          that.delMenuShow = false;
        });
    },
    // 创建任务
    setUpMerthon() {
      if (!this.resultTableData.length) {
        this.$Message.info("请选择要创建的任务");
        return;
      } else {
        this.selectResultRow.forEach((ele) => {
          this.creatTaskData.push(ele.image_src_path);
        });
        this.addShow = true;
        this.getTaskSetId();
        this.creatTaskData = [];
      }
    },
    getTaskSetId() {
      let that = this;
      let path = this.$api.homeLoginOthers.workFlowGroup;
      let params = {
        groupId: 2,
      };
      that.http.get(path, params).then((res) => {
        if (res.data.success) {
          that.taskSetList = res.data.data;
          if (that.taskSetList.length > 0) {
            // this.treeData = that.taskSetList;
            for(let i = 0;i < that.taskSetList.length;i ++){
              if(that.taskSetList[i].children.length > 0){//有children
                let aa = that.taskSetList[i];//先记录再删除
                for(let j = 0;j < that.taskSetList[i].children.length;j ++){
                  if(that.taskSetList[i].children[j].workflowNum == 0){
                    aa.children.splice(j,1);
                    j--;//删完之后数组个数-1，所以j也要--
                  }
                }
                if(aa.children.length > 0){//删完之后如果还有children就放进去
                  this.treeData.push(aa);
                }
              }else{//workflow存在 && 不为0
                if(that.taskSetList[i].workflowNum && that.taskSetList[i].workflowNum != 0){
                  this.treeData.push(that.taskSetList[i]);
                }
              }
            }
          }
        } else {
          that.$Message.error(res.data.message);
        }
      }).catch((err)=>{
        if (err.data.code===401 && err.data.message==="Cluster Node count is more than authorize count") {
          that.$Message.error("授权已过期，请重新申请授权!")
        }else {
          that.$Message.error(err.data.message)
        }
      });
    },
    //统计
    StatisticsData() {},
    //下载，
    downloadData() {},
    /*****************  第三个Table 表格操作     **********************/

    //数据库维护选中事件
    queryTableSelectEvent3(selection, row) {
      let aa = this.maintenanceData.map((ele) => {
        if (ele.id == row.id) {
          ele._checked = true;
        }
        return ele;
      });
      this.maintenanceData = aa;
      this.managerselectRow = selection;

      this.selectFeature(selection, TABLELAYERID3);
    },
    //数据库维护取消事件
    queryTableSelectCancelEvent3(selection, row) {
      let aa = this.maintenanceData.map((ele) => {
        if (ele.id == row.id) {
          ele._checked = false;
        }
        return ele;
      });
      this.maintenanceData = aa;
      this.tableSelectCancelEvent3(selection, TABLELAYERID3, row);
    },
    tableSelectCancelEvent3(selection, layerId, row) {
      let tempData = this.managerselectRow;
      this.selectFeature(selection, layerId);

      let index = tempData.map((ele) => ele.id).indexOf(row.id);

      tempData.splice(index, 1);
    },
    // 删除
    deleteManage() {
      let params = [];
      this.managerselectRow.forEach((ele) => {
        params.push(ele.id);
      });
      let path = this.$api.dataOptimizationApi.deleteEntify;
      this.http.post(path, params).then((ele) => {
        if (ele.data.code == 0) {
          this.$Message.success("删除成功");
          let totalPage = Math.ceil(
            (this.manageTotalSize - 1) / this.pageSizeData
          ); // 总页数
          let a = this.manageTotalSize - (totalPage - 1) * this.pageSizeData;
          if (a == this.managerselectRow.length) {
            if (this.pageNumer == "1") {
              if (this.manageTotalSize > this.pageSizeData) {
                ++this.pageNumer;
              } else {
                this.maintenanceData = [];
                this.managerselectRow = [];
                this.manageTotalSize = 0;
              }
            } else {
              --this.pageNumer;
              return this.searchDataList();
            }
          } else {
            this.searchDataList();
          }
        } else {
          this.$Message.error("删除异常");
        }
      });
    },
    //数据维护
    searchDataList() {
      let that = this;
      let param = this.searchListData();
      this.paramsData = param;
      let params = Object.assign(
        {
          pageNum: this.pageNumer,
          pageSize: this.pageSizeData,
          doFileExist: true,
          doPage: true,
        },
        this.searchListData()
      );
      let path = this.$api.dataOptimizationApi.queryDataScheme;
      this.http.post(path, params).then((res) => {
        if (res.data.code == 0) {
          this.loadingText = "已成功查询，正在加载图层~";
          if (res.data.data.pageData.length < 1) {
            this.$Message.info("未查到相关数据");
          }
          this.maintenanceData = res.data.data.pageData;
          this.managerselectRow = res.data.data.pageData;
          this.manageTotalSize = res.data.data.total;
          let layerId = TABLELAYERID3; //查询列表图层
          this.clearLineLayer(layerId);
          this.getFeatureGeoJson(layerId, that.maintenanceData);
          this.drawLineLayer(layerId, that._filterGeoJsonListData,"map");
          this.drawLineLayer(layerId, that._filterGeoJsonListData,"beforeMap");
          this.hightLayer(layerId, that._filterGeoJsonListData,"map");
          this.hightLayer(layerId, that._filterGeoJsonListData,"beforeMap");
          this.isLoading = false;
          this.loadingText = "正在查询请稍后~";
        }
      });
      this.dicom.cloudslider = 10;
    },
    // 批量修改
    editAllselectManage() {
      this.ManageShow = true;
    },
    // 修改条数
    changePagemanage() {},


    /* 第三个表格列的现任数据 */
    getNewGetColumns(data) {
      debugger;
      console.log(data)
      let that = this;
      this.selectResultRow = this.resultTableData;
      this.selectRow = this.queryDataList;
      this.thumbnaildata = [];
      this.thumbnaildata.push(data);

      if (this.nameeye) {
        this.eyeStates1 = !this.eyeStates1;
      } else {
        this.eyeStates = !this.eyeStates;
      }
      if (this.eyeStates || this.eyeStates1) {
        data.forEach((item) => {
          this.clearLineLayer(item.id);
          this.clearLineLayer(item.id + "-img");

          //(item.image_src_path, "缩略图眼睛");
          // 在这里显示地图，
          let imagePathsuffix = false;
          let imagePath = item.image_src_path;
          let a = imagePath.split("").reverse().join("");
          let b = a.substring(0, a.search(/\./)).split("").reverse().join("");

          if (b == "gz" || b == "tar" || b == "zip") {
            imagePathsuffix = true;
          }
          if (item.product_level == "一级产品" && imagePathsuffix) {
            let aa = item.image_range.coordinates[0];
            aa.splice(4, 1);
            if (item.colorName === "#2d8cf0") {
              this.$set(item, "colorName", "#b0b4bd");
            } else {
              this.$set(item, "colorName", "#2d8cf0");
              let path = this.$api.dataOptimizationApi.getLevelImageFile + "?path=" + item.thumbnail_path;
              let layerMessage={id: item.id, source: {type: "image", url: path, coordinates: aa,}, type: "raster",}
              that.map.addLayer(layerMessage);
              that.beforeMap.addLayer(layerMessage);
            }
          } else {
            this.$set(item, "colorName", "#2d8cf0");
            let pathimage = [];
            let pathimage1 = {
              path: item.image_store_path,
              style: { stretch: { externalNodataValue: 0 } },
            };
            pathimage.push(pathimage1);
            JSON.stringify(pathimage);
            //图片地址
            let path = this.$api.dataOptimizationApi.getLevelImageFile + "?path=" + item.thumbnail_path;
            //服务地址
            let tile = mapServeUrl + "/image-server/v1" + '?request=GetTile&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&info={"info":' + JSON.stringify(pathimage) + "}";
            let nn = [];
            nn.push(item.image_range.coordinates);
            let bb = nn[0].splice(4, 1);

            /**
             * 添加图片
             * */
            let tuPian= {type: "raster", tiles: [tile], tileSize: 256,}
            let videoLayer = {
              id: item.id,
              type: "raster",
              source: item.id,
              minzoom: 11,
              maxzoom: 20,
              paint: {
                "raster-opacity": 1,
              },
            };
            debugger;
            this.map.addSource(item.id,tuPian);
            this.map.addLayer(videoLayer);
            this.beforeMap.addSource(item.id,tuPian);
            this.beforeMap.addLayer(videoLayer);
           /**
            *  //添加服务
            *  */
            let aa = item.image_range.coordinates[0];
            aa.splice(4, 1);
            let laryerData={
              id: item.id + "-img",
              source: {
                type: "image",
                url: path,
                coordinates: aa,
              },
              minzoom: 1,
              maxzoom: 11,
              type: "raster",
            }
            that.map.addLayer(laryerData, item.id);
            that.beforeMap.addLayer(laryerData, item.id);
          }
        });
      } else {
        data.forEach((item) => {
          this.$set(item, "colorName", "#b0b4bd");
          this.clearLineLayer(item.id);
          this.clearLineLayer(item.id + "-img");
          // 在这里清除地图显示，
        });
      }
    },


    editblockManage3(name, h, params) {
      if (params.row.$flagData3) {
        return h("input", {
          domProps: {
            value: params.row[name],
          },
          on: {
            blur: (event) => {
              if (event.target.value != params.row[name]) {
                params.row[name] = event.target.value;
                this.editManage(name, params.row[name], params.row.id);
              }
              this.$set(params.row, "$flagData3", false);
            },
          },
        });
      } else {
        return h(
          "div",
          {
            on: {
              click: () => {
                this.$set(params.row, "$flagData3", true);
              },
            },
          },
          params.row[name]
        );
      }
    },
    editblockManage2(name, h, params) {
      if (params.row.$flagData) {
        return h("input", {
          domProps: {
            value: params.row[name],
          },
          on: {
            blur: (event) => {
              if (event.target.value != params.row[name]) {
                params.row[name] = event.target.value;
                this.editManage(name, params.row[name], params.row.id);
              }
              this.$set(params.row, "$flagData", false);
            },
          },
        });
      } else {
        return h(
          "div",
          {
            on: {
              click: () => {
                this.$set(params.row, "$flagData", true);
              },
            },
          },
          params.row[name]
        );
      }
    },
    editblockManage1(name, h, params) {
      if (params.row.$flag) {
        return h("input", {
          domProps: {
            value: params.row[name],
          },
          on: {
            blur: (event) => {
              if (event.target.value != params.row[name]) {
                params.row[name] = event.target.value;
                this.editManage(name, params.row[name], params.row.id);
              }
              this.$set(params.row, "$flag", false);
            },
          },
        });
      } else {
        return h(
          "div",
          {
            on: {
              click: () => {
                this.$set(params.row, "$flag", true);
              },
            },
          },
          params.row[name]
        );
      }
    },
    editblockManage(name, h, params) {
      if (params.row.$isEdit) {
        return h("input", {
          domProps: {
            value: params.row[name],
          },
          on: {
            blur: (event) => {
              if (event.target.value != params.row[name]) {
                params.row[name] = event.target.value;
                this.editManage(name, params.row[name], params.row.id);
              }
              this.$set(params.row, "$isEdit", false);
            },
          },
        });
      } else {
        return h(
          "div",
          {
            on: {
              click: () => {
                this.$set(params.row, "$isEdit", true);
              },
            },
          },
          params.row[name]
        );
      }
    },
    editblockManage0(name, h, params) {
      if (params.row.$isEdit0) {
        return h("input", {
          domProps: {
            value: this.handleData(params.row[name]),
            innerHTML: this.handleData(params.row[name]),
          },

          on: {
            blur: (event) => {
             let aa = this.handleData(params.row[name])
            //  const value = event.target.value
        //  let cc =   JSON.parse(JSON.stringify(event.target.value ));
             let bb = JSON.parse(JSON.stringify(aa));
              if (event.target.value != aa) {
                params.row[name] = event.target.value;
                if (params.row[name] == "合格") {
                  params.row[name] = "qualified";
                  this.editManage(name, params.row[name], params.row.id);
                } else if (params.row[name] == "不合格") {
                  params.row[name] = "unqualified";
                  this.editManage(name, params.row[name], params.row.id);
                } else if (params.row[name] == "未检查") {
                  params.row[name] = "unchecked";
                  this.editManage(name, params.row[name], params.row.id);
                } else {
                   params.row[name] = bb
                  // value = value
                   this.searchDataList()//value出错，
                  alert("输入不合法,请输入合格与不合格");
                }
              }
              this.$set(params.row, "$isEdit0", false);
            },
          },
        });
      } else {
        return h(
          "div",
          {
            domProps: {
              value: params.row[name],
              innerHTML: this.handleData(params.row[name]),
            },
            on: {
              slot: "quality_inspection_result",
              click: () => {
                this.$set(params.row, "$isEdit0", true);
              },
            },
          },
          params.row[name]
          // if(params.row[name] == "unqualified"){
          //   return params.row[name] ="不合格"
          // }else if(params.row[name] == "qualified"){
          //     return params.row[name] = "合格"
          // }else{
          //   return params.row[name] ="未检查"
          // }
        );
      }
    },
    editManage(label, data, id) {
      let path = this.$api.dataOptimizationApi.editupdateById;
      let params = {};
      if (label == "image_name") {
        params = {
          image_name: data,
          id: id,
        };
      } else if (label == "img_gsd") {
        params = {
          image_gsd: data,
          id: id,
        };
      } else if (label == "cloud_cover") {
        params = {
          cloud_cover: data,
          id: id,
        };
      } else if (label == "crs") {
        params = {
          crs: data,
          id: id,
        };
      } else if (label == "product_level") {
        params = {
          product_level: data,
          id: id,
        };
      } else if (label == "quality_inspection_result") {
        params = {
          quality_inspection_result:data,
          id: id,
        };
      }
      this.http.put(path, params).then((ele) => {
        if (ele.data.code == 0) {
          this.$Message.success("更改完成");
        } else {
          this.$Message.error("异常请刷新页面");
        }
      });
    },
    handleData(data) {
      if (data == "qualified") {
        return "合格";
      } else if (data == "unqualified") {
        return "不合格";
      } else if (data == "unchecked") {
        return "未检查";
      }
    },
  },
  watch: {
    pageNumer: {
      handler(newName, oldName) {
        this.clearSelectimg();
        let params = Object.assign(
          {
            pageNum: this.pageNumer,
            pageSize: this.pageSizeData,
            doFileExist: true,
            doPage: true,
          },
          this.paramsData
        );
        let path = this.$api.dataOptimizationApi.queryDataScheme;
        if (this.name3Boolean) {
          this.http.post(path, params).then((res) => {
            if (res.data.code == 0) {
              this.loadingText = "已成功查询，正在加载图层~";
              if (res.data.data.pageData.length < 1) {
                this.$Message.info("未查到相关数据");
              }
              this.maintenanceData = res.data.data.pageData;
              this.managerselectRow = res.data.data.pageData;
              this.manageTotalSize = res.data.data.total;
              let layerId = TABLELAYERID3; //查询列表图层
              this.clearLineLayer(layerId);
              this.getFeatureGeoJson(layerId, this.maintenanceData);
              this.drawLineLayer(layerId, this._filterGeoJsonListData,"map");
              this.drawLineLayer(layerId, this._filterGeoJsonListData,"beforeMap");
              this.hightLayer(layerId, this._filterGeoJsonListData,"map");
              this.hightLayer(layerId, this._filterGeoJsonListData,"beforeMap");
              this.isLoading = false;
              this.loadingText = "正在查询请稍后~";
            }
          });
        }
      },
      deep: true,
      immediate: true,
    },
    modal12: {
      handler(newName, oldName) {
        let that = this;
        if (!this.modal12) {
          if (this.bannerName == "name1") {
            let aa = that.queryDataList.map((ele, index) => {
              ele._highlight = false;
              return ele;
            });
            that.queryDataList = aa;
          } else if (this.bannerName == "name2") {
            let aa = that.resultTableData.map((ele, index) => {
              ele._highlight = false;
              return ele;
            });
            that.resultTableData = aa;
          } else if (this.bannerName == "name3") {
            let aa = that.maintenanceData.map((ele, index) => {
              ele._highlight = false;
              return ele;
            });
            that.maintenanceData = aa;
          }

          this.tableMouseOut(TABLEHIGHLAYERID1);
          this.tableMouseOut(TABLEHIGHLAYERID2);
          this.tableMouseOut(TABLEHIGHLAYERID3);
        }
      },
      deep: true,
      immediate: true,
    },
  },
};
// 地图操作
const mapSoureList = {

  data() {
    return {
      drawType: "",
      markPprop: null,
      mapClick: "",
      tablelayerId1: TABLELAYERID1,
      tablelayerId2: TABLELAYERID2,
      tablelayerId3: TABLELAYERID3,
      tableHightLayerId1: TABLEHIGHLAYERID1,
      tableHightLayerId2: TABLEHIGHLAYERID2,
      tableHightLayerId3: TABLEHIGHLAYERID3,
      indexData: 1,
      /***** 右侧显示 *****/
      map: {},
      beforeMap: {},
      comp: null,
      queryGeoJsonList: {
        type: "FeatureCollection",
        features: [],
      },
      _filterGeoJsonList: {
        type: "FeatureCollection",
        features: [],
      },
      _filterGeoJsonListData: {
        type: "FeatureCollection",
        features: [],
      },
    };
  },
  mounted() {
    this.initMap();
    this.$bus.$on("confime",(data)=>{
      let mapsoure= this.mapClick === "right"?"map":"beforeMap"
      this[mapsoure].moveLayer(data);
      setTimeout(()=>{
        this.markPprop.remove()
      },200)
    })
    this.$bus.$on("outMark",(data)=>{
      this.markPprop.remove()
    })
  },
  methods: {


    /**   新开发的地图功能  */
    getTuCeng(e) {
      let mapsoure= this.mapClick === "right"?"map":"beforeMap"
      let tuceng = this[mapsoure].getStyle().layers;
      let data= tuceng.filter((item)=>{
        return  item.type==="raster"
      })
      debugger
      var features = this[mapsoure].queryRenderedFeatures([e.point.x,e.point.y]);

      return  features.concat(data).reverse();
    },
    createVideoPopUp(e) {
     let data= this.getTuCeng(e)
      const p = Vue.extend(markDelog);
      let vm = new p({propsData: {list: data}}); //传参
      vm.$mount();//挂载
       return vm.$el;
    },
    youJiDiTuLeft(e) {
      let that = this;
      this.mapClick = "left";
     let domMark= that.createVideoPopUp(e)
      if (this.markPprop){this.markPprop.remove()}
      this.markPprop= new mapboxgl.Popup({closeOnClick: false})
          .setLngLat([e.lngLat.lng, e.lngLat.lat])
          .setDOMContent(domMark)
          .addTo(that.beforeMap);
    },
    youJiDiTuRight(e) {
      let that = this;
      this.mapClick = "right";
      let domMark= that.createVideoPopUp(e)
      if (this.markPprop){this.markPprop.remove()}
      this.markPprop= new mapboxgl.Popup({closeOnClick: false})
          .setLngLat([e.lngLat.lng, e.lngLat.lat])
          .setDOMContent(domMark)
          .addTo(that.map);
    },



    /***  地图的draw功能    */
    drawectangleMap() {
      this.draw.deleteAll();
      this.drawType="jiazai"
      this.draw.changeMode("draw_rectangle");
    },









    /**   一下功能为项目功能            */
    initMap() {
      let that = this;
      this.map = new mapboxgl.Map({
        container: "dqmapBox", // container id
        style: "./static/map/map.json",
        // simple, //四维地球
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
        center: [116.4, 34.5],
        zoom: 3, // starting zoom
        minZoom: 3,
        epsg: 3857,
        attributionControl: true,
        doubleClickZoom: false,
      });
      var scale = new mapboxgl.ScaleControl({
        maxWidth: 80,
        unit: "metric",
      });
      this.map.addControl(scale);
      this.map.on("click", TABLELAYERID1, this.getFeatureDetail);
      this.map.on("click", TABLELAYERID2, this.getFeatureDetail1);
      this.map.on("click", TABLELAYERID3, this.getFeatureDetail11);
      this.map.on("contextmenu", this.youJiDiTuRight);    // 右击地图
      this.beforeMap = new mapboxgl.Map({
        container: "beforedqmapBox", // container id
        style: "./static/map/map.json",
        // simple, //四维地球
        // "http://121.36.21.73:20002/api/pie-cloud/layerData/layerTemplates?id=2c92808c71bafa7a01720c80d12f010c&key=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpbmZvIjoie1widXNlcklkXCI6XCIxMDFcIixcImtleVwiOlwiOTBjNGI5NDI0N2FiMThmYmRiZTMyZDc4NzBkMTVjN2JcIn0ifQ.ifWlOcwmtenARlro-tf9hdLDlXjmbIa2T5AwSvRQB-M", // stylesheet location
        center: [116.4, 34.5],
        zoom: 3, // starting zoom
        minZoom: 3,
        epsg: 3857,
        attributionControl: true,
        doubleClickZoom: false,
      });
      this.beforeMap.addControl(scale);
      this.beforeMap.on("click", TABLELAYERID1, this.getFeatureDetail);
      this.beforeMap.on("click", TABLELAYERID2, this.getFeatureDetail1);
      this.beforeMap.on("click", TABLELAYERID3, this.getFeatureDetail11);
      this.beforeMap.on("contextmenu", this.youJiDiTuLeft);    // 右击地图
    },
    //要素高亮显示
    getFeatureDetail(e) {
      this.map.setFilter(TABLEHIGHLAYERID1, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.beforeMap.setFilter(TABLEHIGHLAYERID1, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.alertDetailData(e);
      this.viewHeightLight(e);
    },
    getFeatureDetail11(e) {
      this.map.setFilter(TABLEHIGHLAYERID3, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.beforeMap.setFilter(TABLEHIGHLAYERID3, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.alertDetailData(e);
      this.viewHeightLight(e);
    },
    getFeatureDetail1(e) {
      this.map.setFilter(TABLEHIGHLAYERID2, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.beforeMap.setFilter(TABLEHIGHLAYERID2, [
        "in",
        "id",
        e.features[0].properties.id,
      ]);
      this.alertDetailData(e);
      this.viewHeightLight(e);
    },
    alertDetailData(e) {
      let aaa = e.features[0].properties.dataInfo;

      let bbb = JSON.parse(aaa);
      if ((bbb["img_gsd"] = "1")) {
        this.imageTypeAlert = "光学影像";
      } else if ((bbb["img_gsd"] = "2")) {
        this.imageTypeAlert = "雷达影像";
      } else if ((bbb["img_gsd"] = "3")) {
        this.imageTypeAlert = "高光谱影像";
      } else if ((bbb["img_gsd"] = "4")) {
        this.imageTypeAlert = "航空影像";
      }
      this.crsData = bbb["crs"];
      this.productTypeData = bbb["product_level"];
      this.sensor_typeData = bbb["sensor_type"];
      this.sat_typeData = bbb["sat_type"];
      this.quality_inspection_result = bbb["quality_inspection_result"];

      this.image_shoot_timeData = bbb["image_shoot_time"]
        ? this.$moment(bbb["image_shoot_time"]).format("YYYY-MM-DD")
        : "";

      this.cloud_coverData = bbb["cloud_cover"];

      let path =
        this.$api.dataOptimizationApi.getLevelImageFile +
        "?path=" +
        bbb["thumbnail_path"];

      this.imagePathData = path;
      this.modal12 = true;
      //   this.$refs.refImageInfoModal.open();
      // // this.imageInfoModal = true;
      // this.infoData = {
      //   data: row,
      //   flag: "optimization",
      // };
      //提示
      // var feature = e.features[0];
      // console.log(feature.properties,'0000000000')
      // var popup = new mapboxgl.Popup({
      //   closeButton: false,
      // });
      // popup
      //   .setLngLat(feature.geometry.coordinates[0][0])
      //   .setText(
      //     "唯一标识：" +
      //       feature.properties.id +
      //       "\r\n" +
      //       "卫星:" +
      //       JSON.parse(feature.properties.dataInfo).satelliteid +
      //       +"\n" +
      //       "数据名称:" +
      //       JSON.parse(feature.properties.dataInfo).dataname
      //   )
      //   .addTo(this.map);
    },
    viewHeightLight(e) {
      let that = this;
      let aaa = e.features[0].properties.id;
      if (this.bannerName == "name1") {
        let aa = that.queryDataList.map((ele, index) => {
          if (ele.id == aaa) {
            this.indexData = index;
          }
          ele._highlight = false;
          return ele;
        });
        that.queryDataList = aa;
        aa[this.indexData]._highlight = true;
        this.$nextTick(() => {
          setTimeout(() => {
            let overflowY =
              this.$el.getElementsByClassName("ivu-table-body")[0];
            if (!overflowY) {
              return;
            }
            overflowY.scrollTop = 48 * this.indexData;
          }, 1000);
        });
      } else if (this.bannerName == "name2") {
        let aa = that.resultTableData.map((ele, index) => {
          if (ele.id == aaa) {
            this.indexData = index;
          }
          ele._highlight = false;
          return ele;
        });

        that.resultTableData = aa;
        aa[this.indexData]._highlight = true;
        // this.resultTableData.forEach(ele)
        this.$nextTick(() => {
          setTimeout(() => {
            let overflowY =
              this.$el.getElementsByClassName("ivu-table-body")[1];
            if (!overflowY) {
              return;
            }
            overflowY.scrollTop = 38 * this.indexData;
          }, 1000);
        });
      } else if (this.bannerName == "name3") {
        // this.maintenanceData
        let aa = that.maintenanceData.map((ele, index) => {
          if (ele.id == aaa) {
            this.indexData = index;
          }
          ele._highlight = false;
          return ele;
        });
        that.maintenanceData = aa;
        aa[this.indexData]._highlight = true;
        this.$nextTick(() => {
          setTimeout(() => {
            let overflowY =
              this.$el.getElementsByClassName("ivu-table-body")[2];
            if (!overflowY) {
              return;
            }
            overflowY.scrollTop = 48 * this.indexData;
          }, 1000);
        });
      }
    },
    /**
     *   //清除图层
     * */
    clearSelectimg() {
      let that = this;
      that.thumbnaildata.forEach((item) => {
        if (item.length != undefined) {
          item.forEach((item) => {
            this.clearLineLayer(item.id)
            this.clearLineLayer(item.id + "-img")
            this.$set(item, "colorName", "#b0b4bd");
          });
        } else {
          this.clearLineLayer(item.id)
          this.clearLineLayer(item.id + "-img")
          this.$set(item, "colorName", "#b0b4bd");
        }
      });
    },
    /*  左侧卷帘   */
    initSwit(data) {
      let that = this;
      this.comp = new mapboxgl.Compare(that.beforeMap, that.map, "#wrapper", {
        // moussemove: true,
        orientation: data ? data : "vertical",
      });
    },
    // 打开关闭卷帘。
    openDeaeg() {

      if (this.comp) {
        let data = this.comp.options.orientation === "vertical" ? "horizontal" : "vertical";
        this.comp.remove();
        this.initSwit(data);
      } else {
        this.initSwit();
      }
    },
    closeDeaeg() {

      if (this.comp) {

        this.comp.remove();
      }
    },
    /*  添加影像 */
    addSouresLary(current, mapName) {
      let that = this;
      const CLOUDSERVICE = mapServeUrl;
      let tile = CLOUDSERVICE + current.serviceUrl;
      this[mapName].addSource(current.title, {
        type: "raster",
        tiles: [tile],
        tileSize: 256,
      });
      let videoLayer = {
        id: current.title,
        type: "raster",
        source: current.title,
        /* minzoom: current.minRatio,
         maxzoom: current.maxRatio,*/
        paint: {
          "raster-opacity": 1,
        },
      };
      this[mapName].addLayer(videoLayer);
      /*this[mapName].setLayerIndex(0);*/
    },
    //get绘制线框的空间范围
    getFeatureGeoJson(id, data) {
      let _this = this;
      _this.queryGeoJsonList = {
        type: "FeatureCollection",
        features: [],
      };
      _this._filterGeoJsonList = {
        type: "FeatureCollection",
        features: [],
      };
      _this._filterGeoJsonListData = {
        type: "FeatureCollection",
        features: [],
      };
      data.forEach((ele) => {
        ele._checked = true; //默认设置勾选
        let coordinates = ele.image_range.coordinates;
        let _tempFeature = {
          type: "Feature",
          epsg: 3857,
          properties: {
            valuecolor: "#ff0000",
            id: ele.id,
            dataInfo: ele,
          },
          geometry: {
            type: "Polygon",
            coordinates: coordinates,
          },
        };
        if (id === TABLELAYERID1) {
          _this.queryGeoJsonList.features.push(_tempFeature);
        } else if (id === TABLELAYERID2) {
          _this._filterGeoJsonList.features.push(_tempFeature);
        } else if (id === TABLELAYERID3) {
          _this._filterGeoJsonListData.features.push(_tempFeature);
        }
      });
    },
    //绘制线图层
    drawLineLayer(id, geoJsonList,mapName) {
      let that = this;
      that[mapName].addSource(id, {
        //原始影像边框
        type: "geojson",
        data: geoJsonList,
      });
      if (id === TABLELAYERID1) {
        that[mapName].addLayer({
          id: TABLELAYERID1,
          type: "fill",
          source: id,
          layout: {},
          paint: {
            "fill-color": "rgba(80, 165, 69, 0)",
            "fill-outline-color": "rgba(80, 165, 69, 1)",
          },
        });
      } else if (id === TABLELAYERID2) {
        that[mapName].addLayer({
          id: TABLELAYERID2,
          type: "fill",
          source: id,
          layout: {},
          paint: {
            "fill-color": "rgba(200, 100, 240, 0)",
            "fill-outline-color": "rgba(124, 34, 185, 1)",
            // "fill-color": "#A020F0",
            // "fill-opacity": 0.4,
            // "fill-outline-color": "red",
          },
        });
      } else if (id === TABLELAYERID3) {
        that[mapName].addLayer({
          id: TABLELAYERID3,
          type: "fill",
          source: id,
          layout: {},
          paint: {
            "fill-color": "rgba(200, 100, 240, 0)",
            "fill-outline-color": "rgba(200, 100, 240, 1)",
            // "fill-color": "#A020F0",
            // "fill-opacity": 0.1,
            // "fill-outline-color": "red",
          },
        });
      }
    },
    clearLineLayer(id) {
      let that = this;
      if (this.map.getLayer(id)) {
        this.map.removeLayer(id);
      }
      if (this.beforeMap.getLayer(id)) {
        this.beforeMap.removeLayer(id);
      }
      if ( this.map.getSource(id)) {
        this.map.removeSource(id);
      }
      if (this.beforeMap.getSource(id)) {
        this.beforeMap.removeSource(id);
      }
    },


    drawGeometry(geometry,mapName) {
      let _this = this;
      if (_this[mapName].getSource("maine1") != null) {
        _this[mapName].getSource("maine1").setData(geometry);
      } else {
        _this[mapName].addSource("maine1", {
          type: "geojson",
          data: {
            type: "Feature",
            geometry: geometry,
          },
        });
        _this[mapName].addLayer({
          id: "area1",
          type: "line", //"fill",
          source: "maine1",
          layout: {},
          paint: {
            "line-color": "#088",
            "line-width": 2,
            "line-opacity": 0.8,
          },
        });
      }
      this.showToCenter(geometry.coordinates);
    },
    //缩放至图层
    showToCenter(coordinates) {
      let _this = this;
      // 计算 并 移动到中心点
      let minGlobalX = 180,
        minGlobalY = 90,
        maxGlobalX = -180,
        maxGlobalY = -90;

      for (let i = 0; i < coordinates.length; i++) {
        let tempData = coordinates[i];
        if (tempData.length < 1) continue;
        tempData.forEach((element) => {
          if (element.length > 2) {
            //多面
            element.forEach((ele) => {
              if (minGlobalX > parseFloat(ele[0])) {
                minGlobalX = parseFloat(ele[0]);
              }
              if (maxGlobalX < parseFloat(ele[0])) {
                maxGlobalX = parseFloat(ele[0]);
              }
              if (minGlobalY > parseFloat(ele[1])) {
                minGlobalY = parseFloat(ele[1]);
              }
              if (maxGlobalY < parseFloat(ele[1])) {
                maxGlobalY = parseFloat(ele[1]);
              }
            });
          } else {
            if (minGlobalX > parseFloat(element[0])) {
              minGlobalX = parseFloat(element[0]);
            }
            if (maxGlobalX < parseFloat(element[0])) {
              maxGlobalX = parseFloat(element[0]);
            }
            if (minGlobalY > parseFloat(element[1])) {
              minGlobalY = parseFloat(element[1]);
            }
            if (maxGlobalY < parseFloat(element[1])) {
              maxGlobalY = parseFloat(element[1]);
            }
          }
        });
      }

      let centerGlobalX = 0;
      let centerGlobalY = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        centerGlobalX = 116.4;
        centerGlobalY = 39.9;
      } else {
        centerGlobalX = (minGlobalX + maxGlobalX) / 2;
        centerGlobalY = (minGlobalY + maxGlobalY) / 2;
      }

      let centermoddle = [];
      centermoddle.push(centerGlobalX);
      centermoddle.push(centerGlobalY);
      //视图范围比数据范围大20%
      let viewWidth = 0;
      let viewHeight = 0;
      if (maxGlobalX === -180 && minGlobalX === 180) {
        viewWidth = (minGlobalX - maxGlobalX) * 0.8; //1.2
        viewHeight = (minGlobalY - maxGlobalY) * 0.8;
      } else {
        viewWidth = (maxGlobalX - minGlobalX) * 0.8;
        viewHeight = (maxGlobalY - minGlobalY) * 0.8;
      }

      let ratio = Math.sqrt(Math.sqrt(Math.sqrt(2))); //2 //视图范围每扩大或缩小ratio倍，缩放等级对应减少或增加0.125

      let indexX = 6; // 6; //初始缩放等级为7
      let zoomBaseX = 5.96; //缩放等级为7时，经度范围为5.96
      if (viewWidth > zoomBaseX) {
        //如果实际范围比基准范围大，基准范围按比例扩大，直至大于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX * ratio) < viewWidth) {
          indexX -= 0.125;
        }
      } else {
        //如果实际范围比基准范围小，基准范围按比例缩小，直至小于实际范围，获取此时缩放等级
        while ((zoomBaseX = zoomBaseX / ratio) > viewWidth) {
          indexX += 0.125;
        }
      }

      let indexY = 6; //初始缩放等级为7
      let zoomBaseY = 1.91; //缩放等级为7时，纬度范围为1.91
      if (viewHeight > zoomBaseY) {
        while ((zoomBaseY = zoomBaseY * ratio) < viewHeight) {
          indexY -= 0.125;
        }
      } else {
        while ((zoomBaseY = zoomBaseY / ratio) > viewHeight) {
          indexY += 0.125;
        }
      }
      //在经纬度分别获取的缩放等级中，获取比较小的值作为缩放等级，确保数据能完全显示
      let index = indexX < indexY ? indexX : indexY;
      _this.map.flyTo({
        center: centermoddle,
        zoom: index, // 缩放比例
      });
    },
    hightLayer(id, data,mapName) {
      // 高亮显示
      let tempIdLayer = id + "-high";
      let pointlayerhighlight = {
        id: tempIdLayer,
        type: "line",
        source: {
          type: "geojson",
          data: data,
        },
        filter: ["in", "id", ""],
        layout: {
          "line-cap": "round" /* 线条末端样式 */,
        },
        paint: {
          "line-color": "red",
          "line-width": 3,
        },
      };
      if (!this[mapName].getLayer(tempIdLayer)) {
        this[mapName].addLayer(pointlayerhighlight);
      } else {
        this[mapName].getSource(tempIdLayer).setData(data);
      }
    },
  },
};
// 创建任务
const creatTaskMessage = {
  data() {
    return {
      addShow: false,
      treeData: [],
      groupTreeId: "", //记录流程线Id
      taskFlag: false, //记录是否执行
      formCustom: {
        taskName: "",
        type: 0,
        taskSetId: "",
        productType: "",
        outFile: "",
        taskOwner: this.$store.state.user.userName,
        department: this.$store.state.user.department,
        dataInfos: [],
      },
      mandatoryStatue: false,
    };
  },
  methods: {
    selectTree(data, val) {
      this.groupTreeId = val.id;
      this.mandatoryStatue = false;
      this.fileCatalogModal = false;
    },
    commitOk() {
      this.mandatoryStatue = this.$refs.taskCreate.submit();
      if (this.mandatoryStatue == false) {
        this.addShow = true;
      } else {
        this.addShow = false;
      }

      let that = this;
      this.$refs["formCustom"].validate((valid) => {
        if (valid) {
          that.formCustom.dataInfos = [];
          this.selectResultRow.forEach((item) => {
            let data = {};
            data.dataId = item.id;
            data.inFileName = item.dataname;
            that.formCustom.taskSetId = Number(that.formCustom.taskSetId);
            that.formCustom.dataInfos.push(data);
          });
          that.http
            .post(
              that.$api.dataOptimizationApi.optimizationTask,
              that.formCustom
            )
            .then((res) => {
              that.addShow = false;
              if (res.data.success) {
                that.$Message.success(res.data.message);
              } else {
                that.$Message.error(res.data.message);
              }
            });
        } else {
          that.$Message.error("请完整填写表单");
        }
      });
    },
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",

            width: "100%",
            expand: false,
            cursor: "pointer",
          },

          on: {
            click: () => {
              /*this.clickTree1(data);*/
            },
          },
        },

        [
          h(
            "Tooltip",

            {
              props: {
                placement: "right-end",
                transfer: true,
              },
            },
            [
              data.title, //控制树形显示的内容

              h(
                "span",

                {
                  slot: "content",

                  style: {
                    whiteSpace: "normal",
                  },
                },

                data.title //控制Tooltip显示的内容
              ),
            ]
          ),

          h("span", {
            style: {
              display: "inline-block",

              float: "right",

              marginRight: "32px",
            },
          }),
        ]
      );
    },
  },
  watch: {
    "formCustom.taskSetId": {
      handler(val, oldValue) {
        if (val) {
          this.formCustom.type = 1;
        } else {
          this.formCustom.type = 0;
        }
      },
    },
  },
};
// fileCatalog 弹框信息
const fileCatalogMessage = {
  data() {
    return {
      fileCatalogModal: false,
    };
  },
  methods: {
    fileCatalogModalClose() {
      this.fileCatalogModal = false;
    },
    fileCatalogModalOk(data) {
      this.formCustom.outFile = data;
      this.fileCatalogModal = false;
    },
  },
};
// imageInfo
const imageInfoMessage = {
  data() {
    return {
      infoData: {},
    };
  },
  methods: {
    imageInfoModalClose() {
      this.$refs.refImageInfoModal.open();
    },
  },
};
//任务集管理
const taskMessage = {
  data() {
    return {
      taskBuild: false,
    };
  },
  methods: {
    openAdd() {
      this.$refs.taskAggregate.openAddDelig();
    },
  },
};
//edit-manage-modal
const editManageModalMessage = {
  data() {
    return {
      ManageShow: false,
      managerselectRow: [], //数据维护选择数据
    };
  },
  methods: {
    async closededitManageData() {
      this.ManageShow = false;
    },
  },
};
// 详情信息列表
const detial = {
  data() {
    return {
      modal12: false,
      /***  详情列表   ***/
      imageTypeAlert: "",
      image_shoot_timeData: "",
      cloud_coverData: "",
      sat_typeData: "",
      sensor_typeData: "",
      productTypeData: "",
      crsData: "",
      imagePathData: "",
      quality_inspection_result: "",
    };
  },
};
// 地图上的按钮操作
const mapCaoZuo = {
  data() {
    return {
      treefather: [],
      childrendata: [],
    };
  },
  methods: {
    //左下角图层服务按钮
    layerManage() {
      let that = this;
      if (this.treefather.length) {
        return;
      }
      let path = this.$api.dataOptimizationApi.imageClassifyInfo;
      this.http.get(path).then((res) => {
        if (res.data.success) {
          res.data.data.forEach((item) => {
            this.childrendata = [];
            item.children.forEach((data) => {
              let cName = data.name;
              let Cnname = {
                title: data.name,
                serviceUrl: data.serviceUrl,
                id: data.id,
                minRatio: data.minRatio,
                maxRatio: data.maxRatio,
              };
              if (data.isRelease) {
                this.childrendata.push(Cnname);
              }
            });
            let itemdata = {
              title: item.imageClassifyName,
              expand: true,
              pid: item.id,
              children: this.childrendata,
            };
            this.treefather.push(itemdata);
          });
          this.childrendata = [];
        } else {
          this.$Message.error(res.data.message);
        }
      });
      this.treefather = [];
    },
    //左下角点击图层数据
    clicktreeChildren(value, event) {
      this.$set(event, "selected", event.checked);
      this.$set(event, "checked", event.selected);
      let that = this;
      if (event.checked) {
        // 1 处理数据
        this.addSouresLary(event, "map");
        this.addSouresLary(event, "beforeMap");
      } else {
        this.$set(event, "selected", event.checked);
        this.$set(event, "checked", event.selected);
        if (!event["children"]) {
          let id = event.title;
          this.clearLineLayer(id);

        } else {
          event.children.forEach((ele) => {
            let id = ele.title;
            this.clearLineLayer(id);
          });
        }
      }
    },
    closeTab() {
      this.leftDrawer = !this.leftDrawer;
      this.rightDrawer = !this.rightDrawer;
    },
  },
};

export default {
  name: "optimizationBuild",
  mixins: [
    mapSoureList,
    leftTable,
    rightSoure,
    creatTaskMessage,
    fileCatalogMessage,
    detial,
    editManageModalMessage,
    taskMessage,
    mapCaoZuo,
    imageInfoMessage,
  ],

  components: {
    fileCatalog,
    imageInfo,
    taskAggregate,
    taskCreate,
    editManageModal,
    markDelog
  },
};
</script>
<style scoped>
/*左侧按钮*/
.leftDrawerButton {
  position: absolute;
  left: 0;
  top: 44.5%;
  width: 12px;
  height: 40px;
  border: 1px solid #cccccc;
  background-color: white;
  line-height: 40px;
  border-radius: 0 3px 3px 0;
}
.rightDrawerButton {
  position: absolute;
  right: 0;
  top: 44.5%;
  width: 12px;
  height: 40px;
  border: 1px solid #cccccc;
  background-color: white;
  line-height: 40px;
  border-radius: 3px 0 0 3px;
}

.drawerHiddernLeftButton {
  position: absolute;
  right: 0;
  top: 44.5%;
}
.drawerHiddernRightButton {
  position: absolute;
  left: 0;
  top: 44.5%;
}
.headLeft {
  display: flex;
  align-items: center;
}
.headRight {
  margin-right: 30px;
}
.leftDrawerHead {
  display: flex;
  justify-content: space-between;
}
.selectOp {
  display: flex;
  flex-direction: column;
}
.delKuangBody {
  min-height: 100px;
  display: flex;
  align-items: center;
}
/deep/.ivu-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
/deep/.ivu-tabs {
  z-index: 100;
}
/deep/.ivu-tabs-bar {
  margin-bottom: 7px;
}
/deep/.leftCard .ivu-form .ivu-form-item-label {
  padding: 10px 0 10px 0;
  margin: 0;
}
/deep/.ivu-drawer-content {
  /* background-color: rgba(255, 255, 255, 0.75) !important; */
}
/deep/.ivu-drawer-body {
  overflow-x: hidden;
  height: calc(100% - 45px);
}
/deep/.ivu-tabs {
  overflow: inherit;
}
/deep/ .ivu-form-item {
  margin-bottom: 0;
}

/* .createModal /deep/ .ivu-form-item {
  margin-bottom: 12px !important;
} */

/deep/.ivu-date-picker {
  width: 100%;
}
.CheckboxGroup /deep/.ivu-form-item-content {
  display: flex;
  flex-wrap: nowrap;
  margin-left: 0 !important;
}
.CheckboxGroup /deep/ .ivu-input-number-small {
  width: 85px;
}
/deep/.ivu-table-body,
/deep/.ivu-table-wrapper-with-border {
  height: calc(100vh - 220px);
  overflow-y: auto;
}

/*  /deep/.ivu-table-border td, .ivu-table-border th{
        background-color:rgba(255,255,255,0.75) !important;
    }*/
/deep/.ivu-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
/deep/.card-footer {
  background-color: rgba(255, 255, 255, 0);
}
/* #satellite /deep/.ivu-checkbox-wrapper {
  margin-right: 20px;
} */
.addStyle /deep/.ivu-form-item-label {
  padding-right: 10px;
}
.rrCity /deep/ .ivu-form-item-label {
  padding-top: 5px !important;
}
/deep/.inOneLine {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  color: #0d86ff;
}

.tableBottom {
  height: 22px;
  width: 100%;
  margin-left: 4px;
  margin-top: 5px;
  display: flex;
  align-items: center;
}
/deep/ .ivu-drawer-header {
  background-color: rgba(223, 225, 236, 0.53) !important;
}
</style>
<style scoped>
/* /deep/.myTable .ivu-table-row-highlight td {
  background-color: #c1d4f0;
} */

/deep/.ivu-slider-input .ivu-input-number {
  width: 62px;
}
.selectOp /deep/.ivu-checkbox-wrapper {
  margin: 0;
}
.leftCard /deep/.ivu-input-number-small {
  width: 68px;
}
/deep/.ivu-tabs-mini {
  background-color: #f0f8ff;
}

.taskBuild /deep/ div {
  display: flex;
}
.taskBuild /deep/ div .ivu-select-selection {
  width: 100%;
}
#bottomDrawer {
  display: none;
}
/deep/.ivu-table:before {
  width: 0;
}
.modalHeader {
  display: flex;
  justify-content: space-between;
}
.CheckboxGroup /deep/ label {
  /* letter-spacing: 3px;*/
  word-spacing: 3px;
}

/*解决弹框图层*/
/deep/.ivu-drawer-wrap-inner {
  z-index: 0;
}
/deep/.mapboxgl-map {
  z-index: 0;
  /* width: 100vw!important;*/
}

/*#dqmapBox {
  height: calc(100vh - 80px);
}*/

.map {
  position: absolute;
  top: 0;
  bottom: 0;
  height: calc(100vh - 80px);
  width: calc(100vw - 20px);
}

/*/deep/.mapboxgl-canvas {
  width: 1700px !important;
}*/
.float-box {
  position: absolute;
  top: 20px;
  left: 300px;
  display: flex;
}
.MapManage {
  margin-bottom: 12px !important;
}

/deep/.ivu-modal-wrap {
  position: fixed;
  overflow: hidden;
  top: -90px;
  right: 0;
  bottom: 0;
  left: 260px;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  max-width: 1300px;
}

/deep/.ivu-modal-content:after {
  display: none;
}

/deep/.ivu-table-overflowX table {
  margin-bottom: 35px;
}
/deep/.ivu-table-body table {
  margin-bottom: 35px;
}
/deep/.ivu-modal-wrap {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  -webkit-overflow-scrolling: touch;
  outline: 0;
  max-width: 100%;
}
/deep/.ivu-checkbox-inner {
  margin-top: 10px;
}
</style>
<style scoped>
/* 滚动cao */
/* 轨道 */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: rgb(214, 214, 214);
}

::-webkit-scrollbar {
  width: 4px;
  height: 10px;
}
/deep/::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #7eb8ee;
}
.bbb {
  /* position: absolute;
  left:10px */
  float: right;
}
.ivu-table .demo-table-info-row td {
  background-color: #2db7f5;
  color: #fff;
}
.matanceData {
  height: calc(100vh - 240px);
  /* height: calc(100vh - 183px); */
}
.rightDrawerStyle {
  height: calc(100vh - 270);
}
.my-table {
  overflow-x: auto !important;
  /* -webkit-overflow-scrolling: touch !important; */
}
.ivu-table .ivu-table-small .ivu-table-border {
  overflow-x: auto !important;
}

/deep/.ivu-drawer-drag-move-trigger {
  height: 40px;
}
/deep/.ivu-drawer-drag-move-trigger-point {
  display: none;
}
/deep/.mapboxgl-compare {
  background-color: rgba(0, 0, 0, 0);
}
</style>

